day21-课堂总结

选择器的优先级

每种选择器都有一个权重值,权重值越大,优先级越高;权值一样的时候,谁在后面谁的优先级越高
标签选择器:0001(1)
class选择器: 0010(2)
id选择器:0100(4)
群组选择器:单独看每个选择器的权重
后代选择器:每个单独的选择器的权重和

内联样式表的优先级永远最高

标准流

css主要用来对网页的内容进行布局和设置样式
1.标准流:网页中的内容在没有写样式的时候,默认的布局方式,我们就叫标准流,在标准流中不同类型的标签布局方式不一样
a.如果是块级标签,一个标签占一行(无视宽度),默认的宽度就是父标签的宽度,默认高度就是内容的高度,并且设置宽度和高度有效
b.如果是行内标签,一行可以显示多个,默认的高度就是内容的高度,默认的宽度就是内容的宽度,设置宽度和高度无效
c.如果是行内块标签:一行可以显示多个,默认的高度和宽度就是内容的宽度和高度,设置高度和宽度有效
2.标签的默认分组
块级标签:h1-h6,p,table,ol,ul,dl,li,div...
行内标签:font,input,img,a,select,textarea,span

display属性

display属性值代表的是标签的类型
1.block - 块标签
2.inline - 行内
3.inline-block - 行内块
默认情况下,我们的标签只有行内和块的,没有行内块的,可以通过修改display属性值来修改标签类型

注意:使用行内块的时候,有一个没有办法修复的坑,行内块到其他标签之间有一个间隙,而且这个间隙不能消除,所以不到万不得已不使用行内块

浮动

浮动(float)
left:左浮动 - 先上在左
right:有浮动 - 先上在右
1.浮动会脱标(脱离标准流) - 之前标准流中的布局方式无效,所有标签都可以一行显示多个,默认大小就是内容大小,设置宽高有效
2.布局原则,努力的向浏览器的左上角靠,先上在左

文字环绕

被环绕的标签的浮动,文字对应的标签不浮动

清除浮动

指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动,他的子标签浮动就会产生高度塌陷的问题
2.清除浮动
a.添加空盒子 - 在高度塌陷的父标签中的最后添加一个空的div,并设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签,设置样式overflow的值为hidden
c 万能清除法

定位

1.定位属性
left - 标签的左边到指定位置的距离(左间距)
right - 标签的右边到指定位置的距离(右间距)
top - 标签的顶部到指定位置的距离(上间距)
bottom - 标签的底部到指定位置的距离(下间距)
2.position属性 - 设置标签定位的时候的参考对象(相对谁去定位)
initial/static(默认值) - 不相对任何对象定位
absolute - 相对第一个非initial/static的父标签进行定位
relative - 相对当前标签在标准流中的位置定位
(注意:一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
fixed - 相对浏览器进行定位
sticky - 当网页中的内容超过一屏(需要滚动),相对浏览器定位,当网页中的内容没有超过一屏(不需要滚动)相对标准流的位置进行定位;(一般只针对最后一个标签)
overflow:hidden - 隐藏子标签超出的部分
注意:定位也会让标签脱标(脱流) - 不管怎么脱,标签都是按脱流的方式进行布局(一行显示多个,设置宽高有效,默认大小是内容大小)

盒子模型

html中所有在网页上可见的标签都时盒子模型,有固定的结构:
所有的可见的标签,都是由内容,padding、border、margin组成,其中的内容、padding、border是可见的。margin是不可见的,只是占位置
1.content - a.设置width和height就是在设置content的大小
b.标签中添加内容也是添加到content中的
c.设置背景颜色,会作用于content
2.padding - a.通过padding相关属性设置padding的大小(4个方向) b.设置背景颜色。会作用于padding
3.border - a.通过border相关属性设置border的大小(4个方向)
b.边框的颜色需要单独设置
4.margin - a.通过margin相关属性设置margin大小
b.不可见,但是占位

你可能感兴趣的:(day21-课堂总结)