css总结_css一个盒子4种衍颜色,不渐变-CSDN博客

本文链接：https://blog.csdn.net/zx_p24/article/details/53318381

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>