选择器的权重
选择器的权重：
类型选择器(元素选择器)：0001
class选择器：0010
id选择器：0100
层级(包含)选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
布局
标准流:
块标签一个占一行,从上往下布局.
行内标签一行可以显示多个,从左往右布局,知道遇到边界就自动换行.
脱流:浮动、定位.
1.浮动：
让竖着显示的标签横着来,块的默认宽度是内容的宽度.
float：left和right.
注意：
a.如果要使用浮动，那么同一级全部浮动.
b.如果父标签浮动，那么子标签的位置会跟着一起动.
c.布局顺序：从上往下，从左往右.
/*#red {
float: left;
}
#green{
float: left;
}*/
/*#top{
float: left;
background-color: red;
height: 140px;
width: 100%;
}
#m1{
float: left;
height: 500px;
width: 20%;
background-color: palegoldenrod;
}
#m2{
float: left;
height: 500px;
width: 60%;
background-color: yellowgreen;
}
#m3{
float: left;
height: 500px;
width: 20%;
background-color: gold;
}
#button{
float: left;
height: 140px;
width: 100%;
background-color: black;
}*/
#top{
float: left;
background-color: red;
width: 100%;
height: 99px;
}
#l1{
float: left;
background-color: black;
width: 20%;
height: 800px;
}
#lt2{
float: left;
background-color: gold;
width: 80%;
height: 200px;
}
#l2t3{
float: left;
background-color: skyblue;
width: 60%;
height: 600px;
}
#lt3{
float: left;
background-color: green;
width: 20%;
height: 200px;
}
#l3t4{
float: left;
background-color: aqua;
width: 20%;
height: 400px;
}
浮动练习
清除浮动：是指清楚因为浮动而产生的问题(高度塌陷) -- 问题不是什么时候都会产生
如何清除：
one----添加空盒子
在父标签(高度塌陷的标签)的最后添加一个空的div并且设置这个div的样式表：clear: both)
可能会产生大量代码
two----设置overflow: hidden
在父标签(高度塌陷的标签)的样式表中设置overflow: hidden
there----万能清除法
/*清楚浮动*/
/*.clear{
overflow: hidden;
}*/
/*万能清楚*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
未清除前
清除后
浮动小应用
文字环绕：被文字环绕的标签浮动，文字标签不浮动
#image{
float: left;
width: 80px;
height: 60px;
}
.img{
float: left;
width: 80px;
height: 60px;
}
#word{
}
第一次工业革命，是标准化，以织布的珍妮纺织机为代表，所有人做同一个工作，生产同一种产品，满足同一种需求。
第二次工业革命，是流水线，以福特汽车工厂为代表，通过分工，生产复杂的产品，满足更高的需求。
第三次工业革命，是互联网化，以微软英特尔为代表，通过分工，生产复杂的模具，再通过大规模复制，满足更广泛的需求。
第四次工业革命，是智能化，通过分工，生产复杂的模具，再通过大规模复制，满足不同人各式各样的需求。
文字环绕
2、定位
1、距离
top:标签顶部距离其它标签的位置
bottom:标签的底部距离其它标签的位置
left:标签的左边距离其它标签的位置
right:标签的右边距离其它标签的位置
2、position(参照物)
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方法
----initial:(默认值)没有参考对象
absolute:相对第一个position值是非static的父标签进行定位
relative:正常位置定位(按标准流定位)
fixed:相对于浏览器定位
sticky:粘性定位(relative与fixed的结合体，一屏范围内relative,超出则为fixed)
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: greenyellow;
top: 120px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: gold;
right: 20px;
bottom: 50px;
}
#d3{
position: sticky;
top: 50px;
}
定位.gif
布局小练习
div div{
float: left;
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d0{
overflow: hidden;
}
for (var i = 0; i < 10; i++) {
document.write("
}
效果展示
display
1、HTML中标签分为块和行内
2、CSS中标签分为3类：块、行内块、行内(用display表示)
PS：在标准流中适用
block:块(一个占一行，默认宽是100%，高度视内容而定；直接设置宽高有效)
inline-block:行内块(N个占一行，默认宽，高度视内容而定；直接设置宽高有效)
inline:行内(N个占一行，默认宽，高度视内容而定；直接设置宽高无效)
通过改变标签的display的值，可以让一个标签在块、行内块和行之间切换
注意：inline-block右边默认有一个间隙，目前不能清除
div{
width: 150px;
height: 150px;
background-color: lightcyan;
}
呼儿将出换美酒
与尔同销万古愁
古来圣贤皆寂寞
惟有饮者留其名
diaplay
盒子模型
每一个标签都是由4个部分组成的：
1、内容：显示标签内容的部分，可见的(设置宽和高的值，就是设置内容部分的大小)
2、内边距(padding):可见的，不能显示内容(通过设置padding来改变其值，默认是0)
3、边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4、外边距(margin):不可见，但是会占据浏览器的空间
/*关闭自带的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: red;
/*设置内容大小*/
width: 100px;
height: 100px;
/*padding的值有四个，可以单独设置，也可以一起设*/
padding:20px ;
/*四周设置*/
padding: 20px,40px;
/*设置上下，左右*/
padding-left: 20px;
/*左*/
/*边框，
* 可以单独设置，也可以一起设
* 格式：宽度 样式 颜色
* a.样式 solid--实线 dotted--点状线 double--双线 dashed--虚线
* */
border-left: 10px dashed green;
border: 10px dashed green10px dashed green;
/*外边距*/
margin-left: 10px;
margin: 10px;
}
abc
盒子模型
居中
设置居中：
1、垂直居中
a.固定标签高度
b.设置line-height的值和高度一样
2、水平居中
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
line-height: 100px;
background-color: hotpink;
text-align: center;
}
p{
display: inline-block;
height: 50px;
line-height: 50px;
width: 200px;
background-color: lavender;
text-align: center;
}
花间一壶酒，独酌无相亲。
居中
其它一些CSS属性
/*文字相关*/
p{
/*1、文字大小*/
font-size: 33px;
/*2、文字颜色*/
color: red;
/*3、文字字体*/
font-family: "宋体";
/*4、文字加粗*/
font-weight: 666;
/*5、字体倾斜*/
font-style: italic;
/*6、内容的对齐方式*/
text-align: center;
background-color: black;
/*7、设置行高
* 可以通过行高参数设置除垂直居中的效果
* */
height: 222px;
line-height: 111px;
/*8、文本修饰
* none:无修饰
* underline：下划线
* line-through：删除线
* overline：上划线
* */
text-decoration:line-through;
/*9、首行缩进
注意单位：em -- 空格
* */
text-indent: 4em;
/*10、字间距*/
letter-spacing: 1px;
}
/*-----列表-----*/
ul{
background-color: aquamarine;
/*1、设置符号样式
* 实心圆(disc)、空心圆(circle)、
* 实心方块(square)、无(none)
* */
list-style-type: circle;
/*2、设置图片为符号*/
list-style-image: url(img/icon.ico);
/*3、设置符号的位置
outside--外
inside--里
* */
list-style-position: outside;
}
/*-----背景相关-----*/
#d1{
height: 300px;
/*1、背景图
* 如果背景图大于盒子的大小，背景图能显示多少就显示多少
* 如果背景图小于盒子的大小，就会平铺(重复显示)
* */
background-image: url(img/bg.png);
/*2、是否平铺
*
*
* */
background-repeat:no-repeat;
/*3.背景图位置的设定
background-position:x y
x:left/center/right/坐标值
y:top/center/bottom/坐标值
* */
background-position: center;
/*4、同时设值
* 图片地址、是否重复、x、y、背景颜色
* */
background:url(img/logo.png)no-repeat center top chartreuse;
}
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
- Python
- H5
- Java
- 测试
其它标签组合使用效果图
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
