This chapter introduces CSS page references to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
css
In order to make the styles of web page elements richer, and to make the content and style of web pages detachable Separately, CSS was born from this idea. CSS is the acronym for Cascading Style Sheets, which means cascading style sheets. With CSS, most of the tags that express styles in HTML are no longer needed. HTML is only responsible for the structure and content of the document, and the presentation is completely left to CSS, making HTML documents more concise.
The definition method of css is:
Selector {Attribute: value; Attribute: value; Attribute: value;}
Select The attribute is the name that associates the style with the page element, and the attribute is the style attribute you wish to set. Each attribute has one or more values. Code example:
p{ width:100px; height:100px; color:red }1. External link: link to the external style sheet into the page through the link tag.
<link>
2. Embedded: Create an embedded style sheet on the web page through the style tag.
<style>
p{ width:100px; height:100px; color:red }
......
</style>3. Inline: Write the style directly on the label through the style attribute of the label.
<p>......</p>
Commonly used css styles for applied text:
color settings The color of the text, such as: color:red;
3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
常用的选择器有如下几种：
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
*{margin:0;padding:0}
p{color:red}
<p>....</p> <!-- 对应以上两条样式 -->
<p>....</p> <!-- 对应以上两条样式 -->通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
<p>....</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<p>....</p>
<h1>....</h1>
<p>....</p>主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<p>
<span>....</span>
<a>....</a>
</p>
<h3>....</h3>多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<p>....</p>
<p>....</p>
<p>....</p>常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<p>....</p>
<p>....</p>
<p>....</p>css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
Overflow setting items:
1. visible default value. The content will not be trimmed and will be rendered outside the element box.
2. The hidden content will be trimmed, and the remaining content will be invisible. This attribute also has the function of clearing floats and clearing margin-top collapse.
3. The scroll content will be trimmed, but the browser will display scroll bars to view the remaining content.
4. auto If the content is trimmed, the browser will display scroll bars to view the remaining content.
5. inherit stipulates that the value of the overflow attribute should be inherited from the parent element.
Element is a label. There are three commonly used labels in layout, block element, inline element and inline block element. Understand these three Only by using the characteristics of these elements can you layout the page proficiently.
Block element
Block element can also be called row element. Commonly used tags in layout are: p, p, ul, li, h1~h6, dl, dt, dd and so on are all block elements. Its behavior in layout:
Supports all styles
If the width is not set, the default The width is 100% of the parent width
The box occupies one line, even if the width is set
Inline elements
Inline elements can also be called inline elements. Tags commonly used in layout such as a, span, em, b, strong, i, etc. are all inline elements. Their behavior in layout is:
Supports some styles (width, height, margin top and bottom, padding top and bottom are not supported)
Methods to solve gaps in inline elements , Remove the line breaks between inline elements
2. Set the font-size of the parent of the inline element to 0, and then set the font-size of the inline element itself
Inline block element , also known as the inner block element, is a new type of element. The existing elements are not attributed to this type. The behavior of the IMG and INPUT elements is similar Inline elements, we can use the display attribute to convert block elements or inline elements into such elements. Their behavior in layout:
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<p></p>关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed generates a fixed positioning element. The element is separated from the document flow and does not occupy the position of the document flow. It can be understood as floating above the document flow and positioned relative to the browser window.
static Default value, no positioning, the element appears in the normal document flow, which is equivalent to canceling the positioning attribute or not setting the positioning attribute
inherit inherits the value of the position attribute from the parent element
## Positioned element properties Absolutely positioned and fixed-positioned block elements and inline elements will automatically be converted into inline blocks Element
Positioning element level Positioning element is floating above the normal document flow. You can use the z-index attribute to set the element level
Typical positioning layout 1. Menu fixed at the top
2. Horizontally and vertically centered pop-up box
3. Fixed side toolbar
4. Fixed at the bottom Button
Attribute explanation The background attribute is a frequently used and important attribute in CSS. It is responsible for setting the background image for the box. As with background color, background is a composite attribute, which can be broken down into the following setting items:
1. "background:url(bg.jpg)", a picture address is set by default, and the picture will fill the box starting from the upper left corner of the box.
#2. "background:cyan url(bg.jpg) repeat-x", tile the box horizontally, and the other parts of the box will display the background color "cyan".
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。
相关代码：
 "153898271765415Page references in CSS (detailed explanation)")
 "153898291567018Page references in CSS (detailed explanation)")
 "153898292139616Page references in CSS (detailed explanation)")
 "153898293820652Page references in CSS (detailed explanation)")
 "153898294321822Page references in CSS (detailed explanation)")
 "153898294793968Page references in CSS (detailed explanation)")
nbsp;html>
<meta>
<title>test background</title>
<style>
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。
关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。
比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。
实现原理示意图：
对应代码：
 "153898309816188Page references in CSS (detailed explanation)")
 "153898310415264Page references in CSS (detailed explanation)")
nbsp;html>
<meta>
<title>test background</title>
<style>
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
<p></p>
The above is the detailed content of Page references in CSS (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
