About CSS specific properties: CSS reference manual URL
Table of contents
Table of contents
Label selector (element selector)
Wildcard selector [generally not used, just for understanding]
(1) Linking pseudo-class selectors
(2) Structural pseudo-class selector
(3) Target pseudo-class selector
text-align: horizontal alignment
text-indent: first line indent
Fourth, the introduction of CSS style sheets
Block-level elements (block-level)
Inline elements (inline-level)
Inline block elements (inline-block)
Pseudo-element selectors (CSS3)
Seven, CSS background (background)
Background position (position)
Eight, the three major characteristics of CSS
Nine, CSS box model (emphasis)
Adjacent block elements are merged vertically
Collapsing vertical margins of nested elements
CSS3 box model (CSS3 new properties)
Floating characteristics (heavy and difficult points)
1. CSS font style properties
font-size: font size
| relative length unit | illustrate |
| em | Equivalent to the font size of the text in the current object |
| px | Pixel [most commonly used, recommended] |
| absolute unit of length | illustrate |
| in | inch |
| cm | centimeter |
| mm | mm |
| pt | point |
font-family: font style
p {
font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，等等＊／
font-size: 14px;／＊ctrl＋／是注释快捷键＊／
color: pink;
}
CSS Unicode Fonts
Setting the font name in CSS can directly write Chinese, but when the text encoding (GB2312 UTF-8, etc.) does not match, it will produce garbled errors, and the xp system does not support Chinese similar to Microsoft Yahei.
Solution 1: Use English instead. font-family: "Microsoft Yahei";
Solution 2: Use Unicode encoded fonts directly in CSS
[Suggestion: Only use "Song Ti" and "Microsoft Yahei" for Unicode fonts]
font-weight: font weight
In addition to the <b> and <strong> tags in HTML, you can also use CSS to complete the font bold effect, but CSS has no semantics.
The font-wieght attribute defines the thickness of the font, and the attribute values include normal, bold, bolder, lighter, and numbers 100 to 900
[Generally prefer to use numbers, number 400=normal, number 700=bold]
strong{
font-weight: normal;/* make the bold of the label wrap not bold*/
}
font-style: font style
In addition to the <i> and <em> tags in HTML, you can also use CSS to complete the font tilt effect, but CSS has no semantics.
normal: Specifies the text font style as a normal font
italic: Specifies the text font style as italic. For special fonts that are not italicized, oblique will be applied if the italic appearance is to be used
oblique: Specifies the text font style as an oblique font. Artificially slant the text instead of selecting italic characters in the font [not commonly used]
em { font-style: normal; ／＊Make the italic wrapped in the label untilted, ＊／}
font: comprehensive style [key]
h1 {
font: italic bold 14px "microsoft yahei";/*The first two items can be omitted, the last two items must be kept, and the order cannot be changed*/
}
Debugging with Chrome
2. Selector [key]
To apply a CSS style to a specific HTML element, you must first get the element. In CSS, the part of the style rule that performs this task is called a selector.
Label selector (element selector)
The tag selector refers to using HTML tags as selectors and classifying them by tags to quickly unify the styles for the same type of tags on the page. The disadvantage is that you cannot design differentiated styles
tag{
attribute1:attributevalue1;
attribute2:attributevalue2;
}
element{
attribute1:attributevalue1;
attribute2:attributevalue2;
}
class selector
Define individual or identical styles for elements
<head>
<style>
h1 {
color:palevioletred;
}
.yinshi { /* 加 “.”声明类样式 */
color: blue;
}
.shenle {
color: orangered;
}
.xinba {
color: gray;
}
</style>
</head>
<body>
<div class="yinshi">银时</div><!-- 此处引用类样式 -->
<div class="shenle">神乐</div>
<div class="xinba">新八</div> CSS naming convention
Class selector naming convention
Web front-end development specification manual pdf download
Multiple class name selector
Add multiple class names to the label to achieve multiple purpose selection
<head>
<style>
.c-blue { /* 加 “.”声明类样式 */
color: blue;
}
.c-orange {
color: orangered;
}
.c-gray {
color: gray;
}
.font20 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="c-blue font20">银时</div><!-- 此处引用类样式 -->
<div class="c-orange">神乐</div>
<div class="c-gray font20">新八</div><!-- 多类名之间用空格隔开 ，此时可以既变颜色又加粗-->
</body>
id selector
Combining memoization with class selectors
#black {
color: black;
}
<div id="black">土方十四郎</div>
<!--区别于类选择器的“.”开始，id选择器以“#”开头命名，在下方标签处引用-->The difference between class selector and id selector
The class selector can be used repeatedly and referenced by multiple tags, which is equivalent to a person's name
The id selector is unique, which is equivalent to an ID number and can only be used once
Wildcard selector [generally not used, just for understanding]
The wildcard selector is represented by "*", which is the most widely applicable of all selectors and can match all elements on the page. The basic syntax format is as follows
* {
Attribute 1: attribute value 1;
attribute 2: attribute value 2;
}
<head>
<style>
* { /*星号代表所有选择器*/
color: #0000FF;
font-size: 20px;
}
</style>
</head>
<body>
<p>银魂</p>
<div>银魂</div>
<strong>银魂</strong>
<i>银魂</i>
<span>银魂</span><!--这是最近正在重刷银魂的博主-->
</body>pseudo class selector
Tend to add effects to certain selectors, such as adding effects to links
(1) Linking pseudo-class selectors
Changing the order may result in the consequence that all effects cannot be realized.
<head>
<style>
a:link {
/* 未访问的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:visited {
/* 访问过一次的链接 */
color: darkorchid;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* 鼠标移动到连接上时链接的变化 */
color: tomato;
font-size: 20px;
font-weight: 700;
}
a:active {
/* 选定的链接，我们按住鼠标别松开时的状态 */
color: green;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>The following is the abbreviation of the link pseudo-class selector [the most common way of writing]
<head>
<style>
a {
/* a是标签选择器，指所有的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* ：hover是链接伪类选择器 */
color: tomato; /* 鼠标经过，由蓝色变红色 */
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>(2) Structural pseudo-class selector
<head>
<style>
li:first-child { /* 第一个孩子 */
color: orangered;
}
li:last-child { /* 最后一个孩子 */
color: green;
}
li:nth-child(3) { /* 第三个孩子，括号写几就是第几个孩子 */
color: mediumpurple;
}
</style>
</head>
<body>
<ul type="square">
<li>长虹剑</li>
<li>冰魄剑</li>
<li>紫云剑</li>
<li>奔雷剑</li>
<li>青光剑</li>
<li>雨花剑</li>
<li>旋风剑</li>
</ul>
</body>other usage
li:nth-child(even) {/* 可以选择所有偶数（even）孩子标签 */
color: orange;
}
li:nth-child(odd) {/* 可以选择所有奇数（odd）孩子标签 */
color: skyblue;
}
li:nth-child(n) {
color: aqua;/* 选择全部孩子 ，里边还可以写2n，3n等等*/
}(3) Target pseudo-class selector
target target pseudo-class selector: The selector can be used to select the currently active target element
:target {
color: red;
}3. CSS Appearance Properties
color attribute
line-height: line spacing
Used to set the line spacing, also known as line height. Generally, it is 7 or 8 pixels larger than the font size, that is, px.
p {
line-height: 40px;
}text-align: horizontal alignment
center: centered
left: left alignment
righ: right alignment
text-indent: first line indent
All paragraphs will be indented, it is recommended to use em as the unit, 1em=the width of a word
p {
text-indent: 2em;/* 此时2em就是两个字的宽度 */
}letter-spacing: word spacing
Space between characters, negative numbers are allowed, default is normal
div {
letter-spacing: 2px;
}word-spacing: word spacing
invalid for chinese
Color translucent (CSS3 new)
color:rgba(r,g,b,a), a refers to alpha, that is, transparency, the value is between [0,1], the parameter cannot be omitted
div {
color: rgb(0,200,173,0.5);
}/*测试下来rgb和rgba效果一样，不知道是不是兼容度提高了，为了规范依然使用rgba*/Text Shadow (CSS3)
text-shadow: horizontal position, vertical position, blur distance, shadow color; [a total of four parameters] the first two parameters must be written, the last two can be omitted
h1{
text-shadow: 1px 2px 4px rgba(183,23,48,0.5);
/* 参数之间用“空格”隔开，而不是逗号
前两个参数必须有，后两个可以省略 */
}Hbuilder shortcut
| div*10 quickly generates 10 labels |
| ul>li quickly generates parent-child class tags |
| div+p quickly generates sibling tags, tags at the same level |
| .red+tab key to quickly generate div with class name |
| #red+tab Quickly generate a div with an id name |
| 例：.nav+.header+.main>.left+.right |
Fourth, the introduction of CSS style sheets
internal style sheet
The internal style is to centrally unload the code from the head of the HTML document and define it with the style tag. You can also place style tags anywhere in the document.
type="text/CSS" can be omitted in HTML5, but it is more standardized to write.
Inline styles (inline styles)
Inline style, also known as inline style, inline style, sets the style of the element through the style attribute of the tag. Only suitable for cases with fewer styles
<tag name style="attribute 1: attribute value 1; attribute 2: attribute value 2"> content </tag name>
external style sheet
The external style is to put all the styles in one or more external style sheet files with the extension of .CSS, and connect them to the HTML document through the link tag. [link is a single label]
Completely realize the separation of structure and style.
<head>
<link rel="stylesheet" href="style.css"/>
</head>
Comparison of three styles
Block-level elements (block-level)
Each element usually occupies a whole line or multiple lines by itself, and height, width, and alignment properties can be set for it
Common block-level elements: <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc.
⭐About the characteristics of block-level elements, you must be able to dictate
Inline elements (inline-level)
It does not occupy an independent area, and only relies on its own size and image size to support the structure. Generally, the width, height, and alignment properties cannot be set.
Common inline elements: <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>
⭐About the characteristics of the elements in the line, you must be able to dictate
Notice:
1. Only text is a paragraph, so block-level elements cannot be placed in the p tag . Similarly, no other block-level elements can be placed in <h1>~<h6><dt>.
2. No more links can be placed inside the link <a>.
Inline block elements (inline-block)
Label mode conversion display
Five, CSS compound selector
intersection selector
An intersection selector consists of two selectors, the first of which is a label selector. The second is a class selector, and there can be no spaces between the two selectors.
The intersection selector means both...and..., and is used relatively seldom
For example: p.one represents a paragraph tag with the class name one
union selector
If the styles defined by some selectors are exactly the same, or partially the same, use the union selector to define the same CSS style for them.
As long as they are separated by commas, all selectors will execute the following styles.
<head>
<style>
p,
h1,
.toshi {
color: aliceblue;
}
</style>
</head>
<body>
<p>春江花月夜</p>
<h1>春江潮水</h1>
<div class="toshi">海上明月</div>
</body>descendant selector
Also known as a containment selector, it is used to select descendants of an element or element group.
The writing method is to write the outer label in front, and write the inner label in the back, separated by a space in the middle
<head>
<style>
.songyang div {
color: darkcyan;
font-size: 16px;
}/*只有.songyang下的div才由效果，外边的div不变*/
</style>
</head>
<body>
<div class="songyang">
<div>坂田</div>
<div>桂</div>
<div>高杉</div>
</div>
<div>近藤</div>
</body>child element selector
You can only select the child elements of a certain element, and the grandchildren of the next level, and the great-grandchildren cannot be selected. The writing method is: parent label > child label , generally leave a space on the left and right sides of the symbol
<head>
<style>
.nav>li{
color: pink;
} /*不知道为什么单独写这个不成功*/
.nav > li > .two > li{
color: black;
}/*必须加上这个才能区分一二级菜单*/
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>attribute selector
<head>
<meta charset="utf-8">
<title></title>
<style>
a[title] {/* 属性选择器用中括号来表示，选出有title的 */
color: #008000;
}
input[type=text]{
color: red;/* 只有type是text的才显示红色 */
}
</style>
</head>
<body>
<a href="#" title="浏览器">Chrome</a>
<a href="#" title="浏览器">edge</a>
<a href="#">firefox</a>
<a href="#">Safari</a>
<a href="#">QQ</a>
<input type="text"value="这是一个文本框">
<input type="submit">
<input type="reset">
</body><head>
<meta charset="utf-8">
<title></title>
<style>
div[class^=font]{ /* class^=font表示以font开始 */
color: deeppink;
}
div[class$=nav]{ /* class$=nav表示以nav结束 */
color: aquamarine;
}
div[class*=TB]{ /* class*=TB表示TB在任意位置都行 */
color: orange;
}
</style>
</head>
<body>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="pdd-nav">属性选择器</div>
<div class="jd-nav">属性选择器</div>
<div class="news-TB-heater">属性选择器</div>
<div class="news-TB-footer">属性选择器</div>
</body>Pseudo-element selectors (CSS3)
::first-letter, select the word or characters in the first line of text (such as Chinese, Japanese, and Korean)
::first-line, select the first line of text, not fixed, it changes according to the size of the browser window
::selection, you can change the style of the selected text, such as changing the color of the white text on the blue background to pink, etc.
<style>
p{
line-height: 35px;
}
::first-letter{
color: aquamarine;/*英文是一个单词，中文是一个字，日文是一个假名*/
}
</style>
</head>
<body>
<p>
なまりの空(そら)【阴霾的天空】
重(おも)く垂(た)れ込(こ)み【垂下凝重的幕帘】
真白(ましろ)に淀(よど)んだ【沉入苍白之中】
太阳(たいよう)が砕(くだ)けて【将太阳斩碎】
耳鸣(みみな)りを尖(とが)らせる【让我大声尖叫】
</p>
</body>
.dome: class selector
first-child: Pseudo-class selector
first-letter: Pseudo-element selector
::before 和 ::after
<head>
<style>
div::before{
content: "门前";/* 必须和content一起使用，记得加引号“” */
color: #FF0000;
}
div::after{
content: "游过一群鸭";
color: skyblue;
}
</style>
</head>
<body>
<div>大桥下</div>
</body>6. CSS writing specification
Whitespace specification
There must be a space between the selector and " { ".
Spaces are not allowed between the attribute name and the following :, and there must be spaces between the : and the attribute value.
Example:
.nav a {
color: red;
}
selector specification
When a rule contains multiple selectors, each selector declaration must occupy a separate line.
Example:
p,
h1,
.toshi {
color: aliceblue;
}
attribute specification
Property definitions must start on a new line.
Example:
div::after{ content: "Swimming through a flock of ducks"; color: skyblue; }
Seven, CSS background (background)
background image (image)
Images under the same project must be referenced, and they may not be in the same folder. Referencing images under different projects will fail
The size of the background image can only be changed with background-size
div {
height: 800px;
width: 600px;
background-color: pink;
background-image: url("图片/1.png");
}
/*问题：1、地址路径按理说不用加引号，加了反倒会引起浏览器兼容性问题，但是必须要加引号才能在我的浏览器上显示出来*/
Background tiling (repeat)
The default is tiling, and no-reprat is required to cancel tiling.
Background position (position)
grammar:
background-position：length || length
background-position：position || position
parameter:
length: The length value composed of percentage, floating point number and unit identifier. see units of length
position：top、center、bottom、left、center、right
To set the background image position of the retrieved object, the background-image attribute must be specified first. The default is (0% 0%). If only one value is specified, that value is applied to the abscissa, and the ordinate defaults to 50%. If there are two values, the second value is applied to the ordinate.
Use location nouns to change the position of the picture, the position defaults to the upper left corner
There is no order for location nouns, whoever comes first will do. If there is only one location noun, the other defaults to center
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: right top;
}Change image position with precise units
The first value must be the x coordinate, and the second value must be the y coordinate.
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: 15px 30px;
}Mixed use
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: center 30px;
}background attachment
The default is scroll
grammar:
background-attachment：scroll | fixed
parameter:
scroll: the background image is scrolled with the content of the object
fixed: the background image is fixed
background abbreviation
Similar to the font abbreviation, but there is no mandatory standard for the order, the general suggestions are as follows
background: background color, background image address, background tiling, Beijing scrolling, background position
background: pink url("女儿.png") no-repeat fixed center 30px;Background transparent (CSS3)
grammar:
background：rgba(0，0，0，0.3);
Background translucency means that the background of the box is translucent, and the content inside the box is not affected.
You can use rgba to set translucency for both text and border.
Background scaling (CSS3)
grammar:
background-size：***px | ***% | contain | cover
Generally, when using px, only one value is changed to prevent zooming. When % is used, it means that the overall image is reduced to the percentage of the original image.
cover: Automatically adjust the zoom ratio to ensure that the image always fills the background area. If there is overflow, it will be hidden. The image is scaled proportionally to ensure that the width and height meet the box size at the same time.
contain: Automatically adjust the zoom ratio, but ensure that the picture is always completely displayed in the background area. As long as the width and height have the same size as the Manju box, it will no longer be scaled. The integrity of the picture is guaranteed, and there will be no missing, but a part of the box will be exposed, and there will be no background picture coverage.
Multiple backgrounds (CSS3)
- An element can set multiple background images
- Separate each set of attributes with commas
- If there is an overlapping relationship between the set background images, the previous background image will be overlaid on the back background image
- In order to prevent the background color from covering the picture, the background color is usually defined in the last group
div {
height: 800px;
width: 700px;
background: url("女儿.png") no-repeat 10px 20px/300px,
url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/
url(troye.jpg) no-repeat 10px bottom/300px pink;
}embossed text
<head>
<style>
body {
background-color: #ccc;
}
div {
color: #CCCCCC;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div >
<div>我是凸起的文字</div>
<div class="second">我是凹下的文字</div>
</div>
</body>A problem arises here: last-child failed to call
Solution: The two divs must be under the parent div to use :last-child, otherwise only :first-child can be used.
The last element under the parent class must be selected when used.
Also: nth-child(n) can be successfully used without having to be under the parent class tag
text-decoration: Usually used to modify the decoration effect of the link.
Tips for use: In one line, set the line height equal to the box height to center the text vertically.
Eight, the three major characteristics of CSS
CSS cascading
The so-called cascading refers to the superposition of multiple CSS styles.
It is a browser's ability to handle conflicts. If an attribute is set to the same element through two identical selectors, then one attribute will overlay the other at this time. This is a style conflict. In case of style conflicts, the last style shall prevail.
1. Style conflicts, follow the principle of proximity. Whichever style is closest to the structure is executed.
2. The styles do not conflict and will not cascade.
CSS inheritance
The so-called inheritance means that when writing a CSS style sheet, the child tags will inherit some styles of the parent tag, such as text color and font size.
Proper use of inheritance can simplify code and reduce the complexity of CSS styles. Child elements can inherit parent element styles: those starting with text-, font-, line-, and color attributes.
CSS priority
When defining CSS styles, it often happens that two or more rules are applied to an element, and at this time there will be a problem of priority.
Regarding the CSS weight, it is calculated with a set of formulas, which is a standard for measuring the priority of CSS. The specific specifications are as follows:
The four levels are from left to right, one level is greater than one level, there is no decimal system between digits, and levels cannot be surpassed.
The weight of the inherited style is 0. No matter how much the weight of the parent element is, when it is inherited by the subclass, the weight is 0, and the element defined by the child element will override the inherited style.
Nine, CSS box model (emphasis)
The so-called box model is to regard the elements in the html page as a rectangular box, and each rectangle is composed of the content of the element, padding, border and margin.
All document elements (labels) will generate a rectangular box, which we call element box (element box), which describes the size of the position occupied by a document element in the summary of the web page layout. Therefore, in addition to having its own size and behavior, each box also affects the size and position of other boxes.
box border (border)
grammar:
border：border-width || border-style || border-color
Border property one: set the border style (border-style)
The border style is used to define the border style in the page, commonly used as follows:
none: no border, ignore width of all borders (default)
solid: the border is a single solid line (the most commonly used)
dashed: the border is a dashed line
dotted: the border is a dotted line
double: The border is a double solid line (used less)
border-style, border-width, border-color, when setting the attributes of the four sides, it is in a clockwise order of top, right, bottom, and left .
div {
border-color: red blue springgreen black;
border-style: dashed double solid dotted;
border-width: 1px 5px 10px 30px;
}When writing together, separate them with spaces.
div:nth-child(4) {
border-top: 3px solid orangered;/*上边框，宽度 样式 颜色*/
border-bottom: blueviolet 3px solid;/*下边框 颜色 宽度 样式*/
/*样式顺序不影响表现*/
}The border attribute is not inherited , and the attributes that can be inherited refer to the part about inheritance.
The difference between cellspacing and cellpadding:
The former is the distance between two cells, and the latter is the distance between the text in the cell and the border.
cellspacing indicates the gap between the cells of the table, and the parameter value is a number
cellpadding indicates the distance between the text in the table and the border of the table
Both attributes are applied inside the <table> tag
Thin line borders for tables
table {
border-collapse: collapse;
}
border-collapse: collapse means that the borders are merged together.
Rounded Borders (CSS3)
grammar:
border-radius: upper left corner upper right corner lower right corner lower left corner;
clockwise order
<style>
div {
height: 400px;
width: 400px;
border: 1px solid red;
}
div:first-child {
border-radius: 10px;
/* 一个数值表示四个角都是相同的10px */
}
div:nth-child(2) {
border-radius: 50%;
/*取宽度和高度的50%，会变成一个圆形*/
}
div:nth-child(3) {
border-radius: 10px 40px;
/* 取对角线，左上角和右下角是10px，右上角和左下角是40px */
}
div:nth-child(4) {
border-radius: 10px 40px 80px;
/* 左上角10 右上角和左下角40 右下角80 */
}
</style>padding
The padding property is used to set the inner margin, which refers to the distance between the content and the border.
The number of values followed by padding is different, and the meaning is different. The direction represented by the two values of padding should be separated from the radius
| number of values | Express meaning (margins refer to inner margins) |
| 1 value | left and right margins |
| 2 values | The former represents the top and bottom margins, and the latter represents the left and right margins |
| 3 values | Top Margin, Left and Right Margin, Bottom Margin |
| 4 values | top margin, right margin, bottom margin, left margin |
margin
The margin property is used to set the outer margin. Setting margins creates "white space" between elements that typically cannot be used to place other content.
margin: top margin, right margin, bottom margin, left margin
The order of values is the same as padding.
Margins to center the box
Two conditions need to be met for a box to be horizontally centered:
1. Must be a block-level element
2. The box must specify the width (width)
Then set the left and right margins to auto to center the block-level elements horizontally.
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;/* 上下不管，左右是auto就能居中 */
}In actual cases, the height of the navigation bar should be an odd number . If the row height is even, there will be a problem of border pixel blanking. When using a:hover, the blocks in the row cannot all change color, and there will be a 1px blank area at the top and bottom edges
Notice:
"margin:0 auto;" does not work for inline-block.
Centering with "margin: 0 auto;" doesn't work, even though "inline-block" can be specified with a numerical value in the first place.
"text-align: center;" does not make the parent element a selector
The basic rule of "text-align: center;" is "selector is the parent element".
If you want to center it, you have to create a parent element.
When using margin: 0 auto in an inline block element, you should also use text-aline: center on its parent element to achieve centering
The inserted picture <img> can also be regarded as a box, and the position can be changed with margin and padding, but the position of the background picture can only be changed with background-position.
Under normal circumstances, the background image is suitable for some small icons, and the product display category is to insert the image
Clear element default margin
* {
padding: 0; /*clear padding*/
margin: 0; /*clear margin*/
}
Inline elements only have left and right margins, not top and bottom margins. We try not to specify top and bottom margins for inline elements .
Collapse Margins
When using margin to define the vertical margins of block-level elements, it is impossible to merge the margins (also known as the collapse of the margins).
Adjacent block elements are merged vertically
Solution:
Only set a margin value
Collapsing vertical margins of nested elements
solution:
① Define a 1-pixel upper border for the parent element (you can use a transparent border, transparent)
② Define 1 pixel top padding for the parent element (padding)
③ Add overflow: hidden to the parent element
content width and height
Use the width attribute width and height attribute height to control the size of the box.
The width and height attribute values can be values in different units or percentages relative to the parent element, but the most commonly used is pixel px
/*External sum size calculation (element space size)*/
Element space height = height + padding + border + margin
Element space width = width + padding + border + margin
/*Inner box size calculation (element size)*/
Element content height = height + padding + border
Element content width = width + padding + border
Notice:
1. The width attribute width and height attribute are only applicable to block-level elements, and are invalid for inline elements (except for img and input tags)
2. When calculating the total height of the box model, the combination of the vertical outer margins of the upper and lower boxes should be considered.
Box Model Layout Stability
Prioritize usage based on stability
width > padding > margin
reason:
1. The margin will have the problem of merging the outer margins, so the last use
2. Padding will affect the size of the box, and it needs to be used after addition and subtraction calculations, which is troublesome
3. There is no problem with width, and the width/height residual method is often used to do it.
CSS3 box model (CSS3 new properties)
In CSS3, box-sizing can be used to specify and model, which can be specified as content-box, border-box, so the way to calculate the box size will be divided into two cases
1. content-box : traditional box model, the box size is: width + padding + border . content-box is the default value, maintaining W3C's standard Box Mode
2. border-box : CSS3 adds a new box model, the size of the box is: width , that is to say, padding and border are included in the width, and will not expand the box.
Ten, floating (float)
ordinary flow
A simple understanding is that traditional div boxes, inline elements, block-level elements, and inline block elements are ordinary flow, also called standard flow
float
Element floating means that elements with floating properties set will break away from standard flow control, that is, they will float up
grammar
selector { float: attribute value; }
| attribute value | describe |
| left | element floats left |
| right | element floats right |
| none | Elements are not floated (default) |
Floating elements first find their closest parent element alignment (upper left corner, or upper right corner alignment, depending on left and right), but will not exceed padding and border, only close to the internal alignment
Floating characteristics (heavy and difficult points)
1. Floating off-label (out of the standard flow), does not take up space, and will affect the standard flow. Float will only float left and right
2. The floating box no longer retains its original position
3. If multiple boxes are set to float, they will be displayed in a row according to the attribute value and aligned at the top .
Note: The floating elements are attached to each other (there will be no gaps). If the parent width cannot accommodate these floating boxes, the extra boxes will be aligned on a new line.
4. Floating elements will have the characteristics of inline block elements
- If the block-level box does not have a width set, the default width is the same as the parent, but after adding floats, its size is determined according to the content
- There is no gap in the middle of the floating boxes, they are close together
- Same for inline elements
Floating is often used together with the parent standard flow, that is, the parent box of the standard flow is a floating child box
An element floats, and theoretically the remaining sibling elements should also float.
If you don't float, there will be problems.
The floating box will only affect the standard flow behind the floating box , and will not affect the standard flow in front of it.
clear float
Clear the essence of floating: Solve the problem that the internal height of the parent element is 0 due to the floating of the child element. 【Originally, the sub-box can prop up the father, but floating is equivalent to floating up, so it cannot be propped up. If the father does not set the height, the height will become 0】
After clearing the float, the parent will automatically detect the height based on the floated child boxes.
clear float syntax
Selector {clear: attribute value;}
| attribute value | describe |
| left | Clear left float effect |
| right | Clear the effect of floating on the right |
| both | clear at the same time |
In our actual work, we almost only use clear: both;
extra labeling
The extra tag method, also known as the partition wall method, is a practice recommended by the W3C.
The extra tag method will add an empty tag at the end of the floating element, such as <div style="clear:both"></div>
Note: It is required that this new empty tag must be a block-level element.
Other methods
1. Add the overflow attribute to the parent
Add the overflow property to the parent and set its property value to hidden, auto or scroll.
2. Add the after pseudo-element to the parent
The :after method is an upgraded version of the extra tag method. Also add to the parent element
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}3. Add double pseudo-elements to the parent
Also add to the parent element
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}