HTML第二天学习笔记
2017-12-25 本文已影响9人
Zz7777777
1.CSS属性
-
可继承属性
-
-父标签的属性值会传递给子标签 -
-一般是文字控制属性
-
-
不可继承属性
-
-父标签的属性值不能传递给子标签 -
-一般是区块控制属性
-
-
标签案例
-
-所有标签可继承(visibility、cursor) -
-内联标签可继承(letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction) -
-块级标签可继承(text-indent、text-align) -
-列表标签可继承(list-style、list-style-type、list-style-position、list-style-image) -
-不可继承属性(display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi )
-
2.盒子模型
91DC3B80-58A9-466F-8FF1-39BAF7C64830.png
3 CSS布局
- 默认情况下，所有的网页标签都在标准流布局中(从上到下，从左到右)
-
脱离标准
-
-float属性(left：脱离标准流，浮动在父标签的最左边
, right：脱离标准流，浮动在父标签的最右边) -
-position属性
D269E1BC-F19A-4C93-BDAB-06CCA34DC955.png
-
4 标签居中显示总结
-
水平居中:
适用于行内标签和行内-块级标签: text-align
适用于块级标签水平居中: margin:0 auto; -
垂直居中:
适用于行内标签和行内-块级标签: line-height
适用于块级标签: position left top tanslate水平居中: 适用于行内标签和行内-块级标签: text-align 适用于块级标签水平居中: margin:0 auto; 垂直居中: 适用于行内标签和行内-块级标签: line-height 适用于块级标签: position left top tanslate --> <style> #main{ background-color: red; width: 300px; height: 200px; /*垂直居中:行高*/ line-height: 200px; /*水平居中:适用于行内标签和行内-块级标签*/ text-align: center; position: relative; } span{ background-color: blue; } .test1{ background-color: yellow; width: 100px; height: 50px; line-height: 50px; /*块级标签---水平居中*/ /*margin-left: 100px;*/ /*margin-left: auto;*/ /*margin-right: auto;*/ margin:0 auto; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } </style> </head> <body> <!--水平居中 垂直居中--> <div id="main"> <!--行内标签--> <!--<span>行内标签</span>--> <!--行内-块级标签--> <!--<button>我是按钮</button>--> <!--块级标签--> <div class="test1">qwqwqw</div> </div>
