按照W3C提倡的标准，一个良好的页面要能做到内容和样式分离，由XHTML(HTML)负责组织内容结构，由CSS负责表现样式。
在css中，子元素会从父元素继承属性。
插入css样式表
1.外部样式表
<link rel="stylesheet" type="text/css" href="css文件路径">
2.内部样式表
例如：
<head>
body{
<style type="text/css">
font-family:Verdana,sans-serif;
p{,argin-left:20px;}
}
</style>
</head>
3.内联样式
选择器
1.标签选择器
2.派生选择器
3.类选择器（类选择器优先级高于标签选择器 ）
4.id选择器
id选择器和类选择器的区别：id选择器用于修饰某个指定的HTML元素（唯一），而类选择器定义的样式可以为HTML文档中多个元素享，能够实现样式的复用。
注意：类选择器和id选择器都可以被用作派生选择器。
样式优先级：
1.从选择器的角度：
id选择器>类选择器>标记选择器
2.从先后顺序的角度
内联样式>内部样式>外部样式表
总结："就近原则"或者"适用范围最小原则"
当拖动浏览器滚动条时，背景不动，只滚动内容的效果：background-attachment:fixed;background-attachment属性的默认值是scroll。也就是说，背景会随页面内容滚动。
超链接属性
a：link：普通的、未被访问的链接。
a：hover：鼠标指针位于链接的上方。
a：active：链接被单击的时刻。
a:visited:用户已访问的链接。
box模型层次结构
1.边框（border）位于第一层。
2.元素内容（content）、内边距（padding）两者都位于第二层。
3.背景图（background-image）位于第三层。
4.背景色（background-color）位于第四层。
5.整个盒子的外边框（margin）位于底层。
box模型中，主要包括内容区、内边距、边框和外边距，一般把后三个属性称为box模型属性。
1em=16px
把边框的所有属性设置到一个 声明 中，需要按照border-left-width、
border-left-style和border-left-color。
外边框
外边框可以接受各种单位的长度值和百分数，甚至可以接受负值（内边距和边框不可以接受负值）。margin属性的默认值是0。
外边距的合并实际显示的结果是取了两者中最大值而不是两者之和。
p+css布局
body｛margin：0px；padding：0px；｝的作用是让浏览器对body元素默认设置的外边框和内边距失效，明确body元素没有外边框和内边距。
绝对定位
绝对定位是相对于元素最近的已定位的祖先元素（设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
给元素加上绝对定位的时候，元素会脱离当前文档流；也就是说绝对定位的元素再文档流中没有位置，它从文档流中脱离了出来，后面的元素会填充掉它原来的位置；在 margin: auto 下，只要 left 和 right 的值相等，且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现居中；如果其 left 超出了范围，那么会取 left 的值作为定位（从左向右的文档流） ;和水平居中有一点不同的是，无论 top 和 bottom 的值设置为多少，只要相等，就可以垂直居中。
总结：
当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。
z-index：
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
浏览器兼容问题：
1.在css里统一内外边距：*{margin:0;padding:0;}
2.图片默认间距
多个<img>标签放在一起的时候，有些浏览器会有默认的间距。
解决方案是，使用float属性为img布局。
3.min-height不兼容
因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器。解决方案是，如果要设置一个标签的最小高度为200px，则需要进行以下设置：{min-height:200px;height:auto !important; height:200px;overflow:visible;}
4.字体大小定义不同
解决方案是，使用指定的字体大小。
总结：很多兼容性问题都是因为不同的浏览器对默认值的解析不同而造成的。因此，在前端开发中，应该尽量避免使用默认值，而是明确地进行属性值的设置。
p是一个块级元素，块级元素的内容自动地开始一个新行，这也是p元素唯一的固有样式。
清除浮动
清除（clear）是浮动的相关属性。一个设置了清除浮动的元素不会想设置浮动的元素那样在其他元素左边界或右边界浮动，而是直接向下移动。
clear属性
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值，允许浮动元素出现在两侧。
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论