css 选择器;盒模型
一.引入方式:
(1)CSS 层叠样式表
作用:修饰网页结构 (2)css的三种引入方式
- 行内样式
注意:行内样式的优先级是最高的
- 内接样式
- 外接样式 二.css选择器
- 基础选择器
- * 通配符选择器
- 匹配所有的标签,通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用
- *{padding:0; margin:0 ;} 重置样式
- #wrap id选择器
- 匹配以唯一标识符id属性等于wrap的对象作为选择符,唯一的只有一个
- div 标签选择器 匹配di标签的选择器
- . 类名 类选择器
- 以class属性包含myclass的E对象作为选择符不同于ID选择符的唯一性,类选择符可以同时定义多个
- * 通配符选择器
- 高级选择器
- ul a 后代选择器
- 选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...
div ul li p{
color: red;
}
- 选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...
- 子代选择器 ; 只能是亲儿子
div>p{
} - 组合选择器 ; 多个选择器组合到一起共同设置样式
div,p,a,li,span{
font-size: 14px;
} - 交集选择器
div.active{
} - 属性选择器
input[type='text'] - li+a 相邻选择器 选择紧贴在li元素之后a元素
- li a 兄弟选择器 选择li元素后面的所有兄弟元素a
- ul a 后代选择器
- 伪类选择器
- a:link 设置超链接a在未被访问前的样式
- a:visited 设置超链接a在其链接地址已被访问过时的样式
- a:hover 设置元素在其鼠标悬停时的样式
- a:active 设置元素在被用户激活(摁住的时候)时的样式
- E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式
- 伪元素选择器
- E:before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性
p:before 在...的前面添加内容 一定要结合content - E:after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性
p:after 在...的后面添加内容 与后面的布局有很大关系
- E:before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性
- 属性选择器
- E[att] 选择具有att属性的E元素
- E[att="val"] 选择具有att属性且属性值等于val的E元素
- E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素
- E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素
- E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元
三.css的继承性和层叠性 (坑)
继承性: color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的
a标签有特殊情况,设置a标签的字体颜色 一定要选中a,不要使用继承性 层叠性: 覆盖 (1)行内> id > class > 标签 **** 1000 > 100 > 10 > 1 (2)数数 数 id class 标签
(3)先选中标签,权重一样,以后设置为主
(3)继承来的属性 它的权重为0 ,与选中的标签没有可比性
(4)如果都是继承来的属性,保证就近原则
(5)都是继承来的属性,选择的标签一样近,再去数权重 四.盒模型
属性:
width:内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距 另一个边到另一个边的距离 盒模型的计算:
总结:如果保证盒模型的大小不变,加padding 就一定要减width或者减height
前提是:在标准文档流
padding:父子之间调整位置
margin: 兄弟之间调整位置
css 选择器;盒模型的更多相关文章
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- CSS中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...
- 前端设计的常用属性,CSS的盒模型,页面布局的利器
在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...
- 【CSS】盒模型+选择器(你选择的要操作的对象)
盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的w ...
- css之盒模型
盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...
- Python-ccs高级选择器 盒模型
css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...
- CSS 2. 盒模型|浮动
1.盒模型 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型.重要的属性: width,height,padding,border, margin 盒子模型通过四个边界 ...
- css之盒模型(box,box-shadow,overflow,BFC)
一.盒模型的概念 CSS中每一个元素都是一个盒模型(Box Model),包括HTML和body标签元素.一般称之为box model.它的本质就是一个盒子,它的属性有margin,border,pa ...
- css 06-CSS盒模型详解
06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...
随机推荐
- maven配置的问题,maven的环境变量配置
不要在用户变量处配置用户变量,直接将maven的bin文件夹路径配置到path环境变量
- 网页效果分析 VCD分解
VCD分解分为三部分: 1. view 视觉 HTML + CSS 基本界面模板 2. controller 控制 javascript 内 ...
- [转】LTE整体架构和协议架构概述
1.1 LTE整体架构 LTE(Long Term Evolution,长期演进)是由3GPP(The 3rd Generation Partnership Project,第三代合作伙伴计划)组织制 ...
- Java-API:java.io百科
ylbtech-Java-API:java.io百科 Java的核心库java.io提供了全面的IO接口.包括:文件读写.标准设备输出等.Java中IO是以流为基础进行输入输出的,所有数据被串行化写入 ...
- Py修行路 Matplotlib 绘图及可视化模块
Matplotlib是一个强大的Python绘图和数据可视化的工具包. 安装方法:pip install matplotlib 引用方法:import matplotlib.pyplot as plt ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- 将openfire部署到CentOS云服务器上
http://ishere.cn/2014/07/25/centos-64bit-openfire.html CentOS 64位安装openfire http://www.cnblogs. ...
- DAY19-Django之form组件补充
问题1:注册页面输入为空,报错:keyError:找不到password def clean(self): print("---" ,self.cleaned_data) # if ...
- ThinkPad E431按F1后直接进入系统无法进入BIOS
联想的ThinkPad系列笔记本一般是按F1进如BIOS的,但是由于现在联想的笔记本多数都是预装Win 8或者更高版本的系统,所以有时候就没办法直接按F1进去BIOS.其原因是因为Win 8或者更高版 ...
- 1 ffmpeg介绍
重点讲解解码的过程.FFmpeg可以进行X264编码.软编码效率是非常低的.即时你编VGA的话它的效率也很低.