当前位置: 首页 > Web前端 > CSS

前端开发知识点css

时间:2023-03-30 18:08:38 CSS

CSScss有两个属性:1)继承。祖先元素有一些属性,所有的后代元素都集成在它上面。哪些属性可以继承:color、font-、text-、line-,这些和文字样式相关的,都可以继承;所有与框、定位和布局相关的属性都不能被继承。2)级联。级联是一种能力,即处理冲突的能力。当不同的选择器对同一个标签的样式有不同的取值时,该听谁的?这是冲突。CSS有一套严格的冲突处理机制:select,countweights,(id个数,class个数,tag个数)。如果权重相同,谁写的晚谁听谁的。没有选择,受继承影响,就近原则,谁形容谁离谁最近。如果描述相同,比如selector的权重,如果权重相同,谁写谁就听谁的。cssweight下面是权重规则:label的权重为1,class的权重为10,id的权重为100。下面的例子是为了演示各种定义的权重值:/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1div{}/*权重is10+1=11*/.class1div{}/*权重为10+10+1=21*/.class1.class2div{}如果权重相同,最后定义的样式会起作用,但是这个应该避免!重要的是不允许的。因为它会让css变得很乱。同一个标签携带多个类名,相互冲突:我是什么颜色?

我是什么颜色?

答:都是红色的,因为css里面是红色写在后面的。float水平居中垂直居中布局三列自适应HolyGrailLayoutHolyGrailLayout首先渲染主要部分allleftfloatingcontianer使用padding挤出左右两列的空间,左右两列使用negativemargin+relativelayout+left/right移动到对应位置doubleflyWingLayoutFlyingSwingLayout先渲染主体部分,向左浮动。第一个div中的main用margin挤出左右两列的空间。左右两列使用负边距移动到相应的位置。第二列是自适应的。