Web前端学习整理(三)

盒模型: 

-盒模型是css中用于描述元素布局和渲染的基本概念.它将每一个html中的元素划分为一个矩形的盒子,该盒子由四部分组成:

        -内容主体,content.

        -内边距,padding.

        -边框,border.

        -外边距,margin.

---

内容主体:

-放置内容的部分,可以由盒子的内容独自撑开(即不设置高度和宽度),还可以通过设置height和width属性来指定内容的大小.

-可以根据主体内容的类型独立地设置单独的样式特征.

---

内边距:

-相当于内容四周的填充物,padding可以接受长度值或者百分比值,但是不接受负值.

---

边框:

-是包裹在padding外层的东西,可由统一的border规定边框大小.

-边框要依次设置大小,线型,颜色.

---

外边距:

-是边框的外层,不会显示盒子的背景,用法和padding一样.

-可以使用margin:auto;来使盒子在父级中左右居中.

---

外边距合并问题:

-在某些情况下相邻元素的外边距会合并(折叠)成一个较大的外边距的现象.外边距合并问题通常发生在垂直方向上.

        -当父元素没有边框|内边距|主体内容,且第一个或最后一个子元素没有边框|内边距时,父元素的上下外边距会与子元素的上下外边距合并,取两者中较大的值作为最终的外边距.

        -当两个相邻的兄弟元素之间内有边框或者内边距时,它们的上下外边距会合并,变成同一个外边距.合并后的外边距的大小会取两个外边距中较大的一个值.

---

怪异盒模型:

-与标准盒模型具有一定区别.

        -标准盒模型表示的只是内容主体的大小.

        -怪异盒模型表示的大小包括边框和内边距.

---

css部分样式:

-默认样式:浏览器在渲染网页的时候为元素引用的初始样式.每个html都有默认样式,但是会具有干扰性.

        -去除默认样式:

                *{margin:0;padding:0;}

                也可以使用相应的选择器来去除默认样式.

-color属性:在css中表示元素内部文本颜色.

        表示法:

                1.单词:red|green|blue等.

                2.十六进制:#eeeeee等

                3.rgb格式.

                4.HSL|HSLA

-overflow属性:控制元素内容溢出时的处理.

        visible:默认值.内容不会被修改,超出部分会呈现在边框外面.

        hidden:常用,超出部分被隐藏.

        scroll:内容不会超出盒子,但是始终会显示滚动条.

        auto:当内容没有超出盒子时,会显示滚动条不然不会显示.