css总结

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

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;}

<div class="b a"></div>

此时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
原创粉丝点击