样式继承:
就是父类的颜色如果变了,子类下的div(或者其他属性)会继承父类的。
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red; } p{ color: green; } ul li a{ color: RGB(200,122,111); } </style> <body> <div class="c1"> DIV1 <div class="c2">DIV2</div> <p>PPP</p> <a href="">click</a> </div> <ul> <li><a href="">11</a></li> <li><a href="">22</a></li> <li><a href="">2222</a></li> <li><a href="">222</a></li> </ul> </body> </html>
line-height:高度
文本行高,通俗地讲,文字高度加上文字上下的空白区域的高度(基于字体的高度)50%等于总高度
verticle-align属性:
设置元素内容的垂直对其方式,只对行内元素有效,对块级元素无效。
当文字和图片同时存在一行时,是利用底线来对其的,这样的话会造成对不齐的现象。
这时候需要在修改img的属性,在style里边调整:
img{
vertical-align:middle;(这里的middle也可以改为其他对齐方式)
}
也可以调像素,改为多少px就行。
其他的一些属性:
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写
背景属性:
background-color(背景颜色) background-image(背景图片) background-repeat(填充方式:不填充,填充等) background-position(定位位置) background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top(20px 20px);(距离左边多少,距离上面多少) 简写
改变数字前面的标示符可以利用list-style:~~~;来改变
Display属性:可以把一个块级标签设置成内联标签
一共有这么几个属性:
none (常用,部分隐藏,部分显示,none的部分隐藏)
block(设置成块级,然后长宽高有效)
inline(设置成内联,设置的长宽高无效)
inline-block
css布局关键点:如何能够在一行显示多个可以调节长宽的元素。
一个标签即兼具了块级设备可以调长宽的属性,又具备了内联标签在一行显示的特性。
代码示例:
<style> /*.c1{*/ /*display: inline;*/ /* 200px;*/ /*height: 200px;*/ /*background-color: green;*/ /*}*/ /*span{*/ /* 200px;*/ /*height: 200px;*/ /*background-color: wheat;*/ /*display: block;*/ /*}*/ .c1{ 200px; height: 200px; background-color: wheat; display: inline-block; } .c2{ 200px; height: 200px; background-color: goldenrod; display: inline-block; } .c3{ 200px; height: 200px; background-color: green; display: inline-block; } span{ margin-left: -4px; } .Myhide{ display: none; } /*===========================*/ .box{ border:1px solid red; } .ico,.egon{ display: inline-block; } .box:hover img{ display: block; } </style> </head> <body> <!--<div class="c1">DIV</div>--> <!--<span>SPAN</span>--> <span class="c1 Myhide">111</span> <span class="c2">222</span> <span class="c3">333</span> <div class="box"> <div class="text">hkjfdashfkas</div> <div class="text"> <div class="ico">???????????????</div> <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div> </div> </div> </body>
图片一开始隐藏的,悬浮左边显示右边。
<style>
.box{
border:1px solid red;
}
.ico,.egon{
display: inline-block;
}
.box:hover img{
display: block;
}
</style>
<div class="box"> <div class="text">hkjfdashfkas</div> <div class="text"> <div class="ico">???????????????</div> <div class="egon"><img class="Myhide" src="egon.jpg" alt="" width="30px" height="30px"></div> </div> </div>
清除浮动:
浮动元素上一个是浮动元素,紧贴着上一个。
上一个不是浮动元素,就在他的下面。
<style> body{ margin: 0; } .c1{ 100px; height: 170px; background-color: #53868B; float: left; clear: left; } .c2{ 200px; height: 70px; background-color: cornflowerblue; float: left; clear: both; } .c3{ 300px; height: 120px; background-color: darkmagenta; float: left; } .c4{ 300px; height: 300px; background-color: green; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <!--<div class="c4"></div>--> </body>
clear: both;
clear: left;
clear: right;
Position定位:
position之fix定位:做一个一直在某个位置的按钮(例如返回顶部)
代码:
<style> .c1{ 100%; height: 2000px; background-color: wheat; } .returnTop{ 120px; height: 40px; background-color: gray; color: white; text-align: center; line-height: 40px; position: fixed; right: 20px; bottom: 20px ; } </style> </head> <body> <div class="c1"></div> <div class="returnTop">返回顶部</div> </body>
清除浮动的应用:
float父级塌陷:
设置的子级元素不跟父级一样,然后就会出现高度不一样的情况(或其他情况)。
<style> *{ margin: 0; } .header{ 100%; /*height: 80px;*/ background-color: #53868B; } .header .item1,.header .item2{ 60px; height: 80px; background-color: goldenrod; float: left; } .item2{ background-color: green!important; } .header .item3{ 60px; height: 50px; background-color: goldenrod; float: right; } .content{ 100%; height: 300px; background-color: darkmagenta; } .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="header clearfix"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> <div class="content"></div> </body>
relative与absolute定位:
fixed:完全脱离文档流,参照物是可视窗口,可以设置top,left,right,bottom
relative:不脱离文档流,参照物是自己原本的位置,可以设置top,left,right,bottom
absolute:完全脱离文档流,参照物已定位的父级标签,可以设置top,left,right,bottom
一般,
(1)给某些元素进行定位,设置absolute;
(2)改定位标签的父元素设置定位;
<style> body{ margin: 0; } .c1{ 200px; height: 200px; background-color: #53868B; } .c2{ 200px; height:200px; background-color: cornflowerblue; position: absolute; top:200px; left: 200px; } .c3{ 200px; height: 200px; background-color: darkmagenta; } .box{ position: relative; } </style> </head> <body> <div class="c1"></div> <div class="box"><div class="c2"></div></div> <div class="c3"></div>
京东轮播图布局:
14