day23 css核心属性

1选择器的优先级

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

2标准流

css主要用来对网页中的内容进行布局和设置样式。

2.1标准流

标准流: 网页中的内容在没有写样式的时候,默认的布局方式,我们就叫标准流
在标准流中不同类型的标签布局方式不一样:
a.如果是块级标签,一个标签占一行(无视宽度),默认的宽度是父标签的宽度,默认高度是内容的高度,并且设置宽度和高度有效
b.如果是行内标签,一行可以显示多个,默认的宽度和高度都是内容的宽度和高度,设置宽度和高度无效
c.如果是行内块标签,一行可以显示多个,默认的宽度和高度都是内容的宽度和高度,设置宽度和高度有效.

2.2.标签的默认分组

块级标签:h1~h6, p, table, ol, ul , dl, li, div....
行内标签: font, input, img, a, select, textarea, span...

3 display属性

display属性值代表的是标签的类型:
1.block : 块标签
2.inline : 行内
3.inline-block : 行内块
默认情况下,我们的标签只有行内的和块的,没有行内块的。可以通过修改display属性值来修改标签类型
注意:使用行内块的时候,有一个没有办法修复的坑。行内块到其他标签之间有一个间隙,而且这个间隙不能消除。
所以不到万不得已不使用行内块

 !--1.块标签变成行内标签-->

我是段落

我是段落2

!--2.块标签变成行内块标签-->

我是段落3

我是段落4

!--3.行内转换成块--> a1 a2

4浮动

4.1浮动(float)

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

利用浮动脱标进行布局

5文字环绕

被文字环绕的标签浮动;文字对应的标签不浮动(环绕的宽度需大于被环绕的宽度)

被环绕

渥太华我让他就和我俄国人沃尔hi哦胳膊上 惹人who提whit oh国防部独守空房公布数据公布舞台然后我i合同委托任务

6清除浮动

6.1.高度塌陷

指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动,子标签浮动就会产生高度塌陷问题

6.2清除浮动

a.添加空盒子 - 在高度会塌陷的父标签中的最后添加一个空的div,并且设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签,设置样式的overflow的值为hidden(父标签中不能设置高度)(经常用到)
c.万能清除法 - #div1:after{display:block;content:"";visibility:hidden;clear:both;height:0;}
#div1{zoom:1} 除了选择器要改变,后面的都一样

  

7定位

7.1定位属性

left - 标签的左边到指定位置的距离(左间距)
right- 标签的右边到指定位置的距离(右间距)
top - 标签的顶部到指定位置的距离(上间距)
bottom- 标签的底部到指定位置的距离(下间距)

7.2position属性

position属性--设置标签定位的时候的参考对象(相对谁去定位)
initial/static(默认值)-不相对任何对象定位
absolute(绝对定位) - 相对于第一个非initial/static的父标签进行定位
relative(相对定位)-相对当前标签在标准流中的位置进行定位
(注意:一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
fixed-相对于浏览器进行定位
sticky -当网页中的内容超过一屏(需要滚动),相对浏览器定位,当网页中的内容没有超过一屏(不需要滚动),相对标准流的位置进行定位(注意:一般只针对最后一个标签)
注意:定位也会让标签脱标,不管怎么脱,标签都是按脱流的方式进行布局(一行显示多个,设置宽高有效,默认大小是内容下大小)


    
    
    


    
    
全额付清把握和非

8盒子模型

html中所有在网页上可见的标签都是盒子关系,有固定的结构:所有可见的标签都是由:内容、padding、border和margin组成,其中内容、padding、border是可见的,margin不可见;

8.1.内容(content) -

a.设置width和height就是在设置内容的大小;
b.标签中添加内容也是添加到content中的
c.设置背景颜色,会作用于内容

8.2.padding-

a.通过padding相关属性设置padding的大小(4个方向)
b.设置背景颜色也会作用于padding

8.3.border -

a.通过border相关属性设置border的大小(四个方向)
b.边框的颜色需要单独设置

8.4.margin -

a.通过margin相关属性设置margin的大小
b.不可见,但是占位


            
    
python 内容

你可能感兴趣的:(day23 css核心属性)