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;}
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>
原理:把四条边设置成不同颜色
<!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、
- 【CSS】CSS样式总结
- 【CSS+DIV】CSS总结
- CSS总结
- CSS总结
- CSS总结
- CSS总结
- css总结
- css总结
- css总结
- CSS总结
- CSS总结
- CSS总结
- CSS总结
- CSS总结
- CSS总结
- css总结
- Css总结
- css总结
- 关于前台合并获取后台动态table中数据相同的单元格的问题;th td合并
- 第十二周项目5-迷宫问题之图深度优先遍历解法
- android studio 项目结构必知
- 数据解析
- 第十三周项目1-floyd算法
- css总结
- java.lang.IllegalStateException异常产生的原因及解决办法
- JS 对象(Object)和字符串(String)互转
- Java学习记录(14)——Annotation
- **将存放在首地址为buf、长度为3B的数据联合左移2位。例如,左移前为88 88 88H,左移后应为22 22 20H。** * > 联合移位操作
- Squid代理服务器
- 【转载】如何制定有效的配置管理流程
- 第十三周项目3 Dijkstra算法验证
- 第13周 项目-验证算法(Floyd算法的验证)