盒模型:
-盒模型是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:当内容没有超出盒子时,会显示滚动条不然不会显示.