css总结

来源：互联网发布：智取数字3软件编辑：程序博客网时间：2024/06/16 08:39

1、css的盒模型？

盒模型：内容（content）、填充（padding）、边框（border）、外边距（margin）

（1）W3C盒模型（标准盒模型）：盒子的实际大小=content+padding+border；盒子占据位置=content+padding+border+margin

（2）IE盒模型：盒子实际大小=content；盒子占据位置=content+margin

注意：IE盒模型中content就包含了border和padding值

引申：bootstrap中就是给所有内容增加了box-sizing：border-box属性，让其以IE盒模型的方式展示。

2、css选择符有哪些？

id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器

可以继承样式：font-size、font-family、color、ul、li、dl、dd、dt

不可继承的：height、width、padding、margin、border

3、css优先级机制

（1）样式优先级

外部样式<内部样式<内联样式

例外：外部样式放到内部样式后面，则此时外部将覆盖内部样式。

（2）选择器优先权

内联样式表（写在标签上的样式style）权值最高1000

ID选择器权值为100

class类选择器的权值为10

HTML标签选择器的权值为1

css优先级法则：

选择器都有权值，权值越大越优先；

权值相等，后出现的样式表设置要优先于先出现的样式表

自己写的css高于浏览器默认样式

继承的css样式不如后来指定的css样式

！important优先级最大，比内联样式和js设置的样式优先级还高，但是IE6不支持这个规则。

引申问题：css样式覆盖（对应上面法则第二条）

.a{color:red;}

.b{color:blue;}

此时b的优先级更高，颜色为蓝色，因为样式表中b的样式设置的更靠后，跟在div元素上的class书写顺序无关~~~~~~~~

4、页面导入样式时，使用link和@important有什么区别？
区别1：link是xhtml标签，除了加载css外，还可以定义Rss等其它事务；@important属于css范畴，只能加载css
区别2：link引用css时，在页面载入时同时加载；@important需要也没按网页完全载入后加载；
区别3：link是xhtml标签，无兼容问题；@important是在css2.1提出，低版本浏览器不兼容
区别4：link支持js控制DOM去改变样式；@important不支持。

5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

（1）给div设置宽度，加上margin:0 auto;

<div class="div1"></div>.div1{width: 200px;height: 200px;margin: 0 auto;background: red;}

（2）如果元素浮动了，那上面的居中就不适用

<div class="box"><p></p></div> .box{float:left;position:relative;left:50%;}p{float:left;position:relative;right:50%;background: red;width: 100px;height: 100px;}

（3）让绝对定位元素水平居中

方法一：

<div class="div1"></div>.div1{position: absolute;width: 1200px;background: none;margin: 0 auto;top: 0;left: 0;bottom: 0;right: 0;}

方法二：

<div class="div1"></div>.div1{position:absolute;left:50%;background: red;width: 100px;height: 100px;margin-left: -50px;}

6、position有几个属性值，代表什么意思？

absolute:生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。脱离文档流。

relative：生成相对定位元素，相对其元素本身的位置进行定位。不脱离文档流。

fixed：固定定位，相对于浏览器窗口进行定位。脱离文档流。（IE6不支持）

static：默认。不定位。元素出现在正常文档流。

inherit：规定从父元素继承position属性的值。

7、css创建一个三角形

原理：上、左、右三个边隐藏（transparent）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{        margin: 0;        padding: 0;        }        .box{        width: 0;        height: 0;        border-width:100px;        border-style:solid;        border-color:transparent transparent blue transparent;        }    </style></head><body>    <div class="box"></div></body></html>

引申：css创建一个正方形，分别有四个不同颜色的三角形构成

原理：把四条边设置成不同颜色

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{        margin: 0;        padding: 0;        }        .box{        width: 0;        height: 0;        border-width:100px;        border-style:solid;        border-color:green red blue black;        }    </style></head><body>    <div class="box"></div></body></html>

8、display有哪些值？

（1）block：块类型。可设置宽高，默认独占一行。

（2）inline：行内元素类型。不可设置宽高，同行显示。

（3）inline-block：内联块。可设置宽高，同行显示。

（4）list-item：类似块元素显示，添加样式列表标记。

（5）table：块级表格。

（6）none：缺省值。

（7）inherit：从父元素继承display值。

9、

0 0