day04 浮动及盒模型

    关于静态页面布局的思路

    1.页面可以看成是搭积木,说明需要设置多个部分,并且将多个部分分成盒子进行拼接

    2.分析有六个区域 => div*6

    3.给6个盒子分别设置宽高大小 => ?

    4.从左到右 从上到下

<!--

    层级选择器的使用:后代选择器/包含选择器、子代选择器、相邻一个、相邻全部

    一:后代选择器/包含选择器

    1.语法:父级选择器 子级选择器{}

    2.说明:表示可以通过父级元素选择到下面的子级元素(爷爷所有的孩子:父亲、叔叔、伯伯、姑姑、你、哥哥、弟弟、曾孙)

    二:子代选择器

    1.语法:父级选择器>子级选择器{}

    2.说明:表示可以通过父级元素选择到下面的直接子级元素(爷爷直接的孩子:父亲、叔叔、伯伯、姑姑)

    三:相邻一个、相邻全部【了解】

    1.表示从当前选择器选择到相邻后面一个兄弟选择器:从哥哥选择到一个弟弟 +

    2.表示从当前选择器选择到相邻后面所有兄弟选择器:从哥哥选择到全部弟弟 ~

 

 1.常见的选择器有哪些:标签、id、class、群组、通配符、后代、子代

    2.思考:选择器的优先级(权重)

    3.关于权重的使用:权重可以使用四位数字表示 0000

        - 行内样式表    1000

        - id选择器      100

        - class选择器   10

        - 标签选择器     1

        - 通配符         0

        - 群组选择器    各自计算的

        - 包含选择器    相加的

        - 拓展:  属性:属性值 !important 无敌

    疑问:什么是层叠性?

    解答:一个标签可以设置多个选择器,选择器的使用规则是根据选择器的权重决定,如果选择器中的属性是不同的就会进行叠加,相同的就会以权重更高的进行选择

    浮动属性的使用

    1.概念:使用浮动属性可以改变元素的位置(默认从上到下改为从左到右/从右到左)

    2.生活:气球、云朵、浮萍等都是浮动起来的

    3.属性:float 使xx漂浮/浮动

    4.属性值:left/right/none(默认值,表示不浮动)

    5.浮动的特点

        - 从浮动的属性值上进行观察就可以得出结论浮动只能控制元素在水平方向上移动

        - 给元素设置了浮动属性之后,当前元素会脱离文档流,初始位置不存在下面的盒子就会占据,破坏网页布局

        - 浮动元素漂浮停止的条件

            - 碰到父级包含框(父级的边框)的时候就会停止浮动

            - 碰到前面一个含有浮动属性元素也会停止浮动

        - 特殊情况:当浮动的子级元素宽度大于父级容器的时候,最后一个子级元素会往下移动直至找到足够的空间

    拓展"流"的概念

    1.文档流/普通流:指的就是网页的正常布局

    2.浮动流/浮动层:会出现在正常网页的上方(看不见的)

  浮动的特殊情况:浮动元素只会盖住容器盒子,不会盖住文本内容(真实的DOM结构)

    标准的盒模型

    1.作用:设置元素与元素之间的位置关系

    2.组成

        - content   内容区域:元素自己的大小(宽高)

        - padding   内边距:父级和子级之间的间距

        - border    边框

        - margin    外边距:同级元素之间的间距

    3.生活

        - content对应的就是快递中的物品

        - padding对应的就是快递中的泡沫

        - border对应的就是快递中的快递盒

        - margin对应的就是快递中的多个快递盒之间的间距

外边距margin的使用方法

    1.作用:设置同级元素之间的位置关系(哪个元素移动就给哪个元素设置即可)

    2.属性:margin

    3.特点

        - 既然是设置间距的,所以外边距的属性值需要设置数值加单位

        - 关于margin属性值个数的使用(多个属性值之间需要使用空格隔开)

            - 一个属性值的时候:上下左右都是一样的

            - 两个属性值的时候:上下 和 左右

            - 三个属性值的时候:上 和 左右 和 下

            - 四个属性值的时候:上 右 下 左 (前端中默认的方向是顺时针)

        - 还可以设置某一个方向:margin-方向值(top|right|bottom|left)

    4.总结关于margin外边距常见的设置

        - *{margin:0;padding:0} 清除浏览器的默认间距

        - 版心的选择器{ margin:0 auto } 版心居中

    5.倚天屠龙记:越好用的属性bug(兼容性)越多

        - 第一个bug:当两个盒子上下排列的时候,分别设置margin-top/bottom 解析的时候会解析之间的最大值

        - 第二个bug:在父级元素中只有一个子级元素的时候,子级元素设置margin-top会错误解析到父级元素

            - 已经学习过的解决方法:子级设置浮动

            - 还没有学习的解决方法:给父级设置边框、文本溢出属性

            - 还可以使用内边距解决~

    内边距padding的使用方法

    1.作用:可以设置父级元素与子级元素之间的位置关系

    2.属性:padding

    3.特点

        - padding的属性值需要设置数值和单位

        - 关于padding的设置位置(特点)

            - 父级元素:会撑大当前容器的大小,为了保证页面不受影响,在初始的宽高上减去相应的padding值(所有子级)

            - 子级元素:单独控制某一个子级元素,子级元素也会被撑大,是否需要减去根据需求定

        - 关于padding属性值个数的使用(多个属性值之间需要使用空格隔开)

            - 一个属性值的时候:上下左右都是一样的

            - 两个属性值的时候:上下 和 左右

            - 三个属性值的时候:上 和 左右 和 下

            - 四个属性值的时候:上 右 下 左 (前端中默认的方向是顺时针)

        - 还可以设置某一个方向:padding-方向值(top|right|bottom|left)

    4.注意点:内外边距使用可不可以使用负值?

        - 外边距可以使用,内边距不可以！