css的三大特性
css有三个非常重要的三个特性;层叠性 继承性 优先级
层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性
主要解决样式冲突的问题
原则
样式冲突,遵循原则上就近原则,那个样式离结构近,就执行那个样式
样式不冲突,不会层叠
口诀:长江后浪推前浪,前浪死在沙滩上
继承性
css继承中 子标签会继承父标签的某些样式,如文本颜色和字号,简单理解就是;子承父业
恰当地使用可以简化我们的代码,降低css样式点复杂性
子元素可以继承父元素的样式(text font line 这些元素开头的可以继承,以及color属性)
/* 子元素继承父元素的行高1.5 当前元素文字大小的1.5倍 */
优先级
当同一个元素指定多个选择器,就会有优先级的产生;
选择器相同,则执行层叠性;
选择器不同,则根据我们的选择器权重执行;
继承或者通配符选择器 0 0 0 0
元素选择器(也就是我们标签选择器) 0 0 0 1
类选择器 伪类选择器 0 0 1 0
id选择器 0 1 0 0
行内样式 1 0 0 0
!imporetant 无穷大
注意
1 权重有4组数字组成的,但是不会有进位;
2 简单记忆方法 通配符选择器权重为0,标签选择器为1 类选择器为10,id选择器为100,行内样式表为1000
!important 无穷大
3 继承权重为0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重为0;
a链接浏览器默认制定了一个样式 蓝色 下换线 相当于 a{color:blue; text-deraction:underline}
权重叠加问题
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重
权重虽然会叠加 但是永远不会有进位的问题
css的盒子模型
页面布局三大核心 盒子模型 浮动 和定位 ,学习好盒子模型能非常好的帮助我们布局页面
1 看透网页布局本质
1 先准备好相关的网页元素,网页元素基本都是盒子模型box;
2 利用css设置好盒子样式,然后摆放到相应的位置上。
3 向盒子里面装内容
盒子模型
1 所谓盒子模型:就是把我们html的元素看做是一个矩形的盒子,也就是一个盛装内容的容器。
css盒子模型本质上一个盒子,封装周围的html元素,他包括;边框,外边距,内边距和实际内容
border边框
content 内容
padding 内边距
margin 外边距 控制一个盒子与另一个盒子之间的距离的
边框border
border可以设置元素的边框,边框有三部分边框宽度(粗细) 边框样式 边框颜色
boder:boder-width| border-style| boder-color;
boder-width 定义边框的粗细,单位是px;
border-style 边框的样式属性 solid 实线边框
dashed 虚线边框
dotted 点线
boder-color 边框颜色
边框的简写
border边框允许你指定一个元素进行元素边框的样式和颜色
border : 1px solid red; 没有顺序
边框分开写法
border-top:1px solid red;
表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式,它控制相邻单元的边框
collapse 单词意思的合并的意思
border-collapse : collapse ;表示相邻边框合并在一起;
边框会影响盒子实际大小;
1 测量盒子时候可以不量边框
2 如果测量的时候包含了边框,则需要width和height减去边框的宽度
内边距padding
边框与内容之间的距离。
padding-left:18px;
padding-right
padding-top
padding-bottom
padding:5px; 1个值,达标上下左右都有5像素的内边距
padding:5px 10px; 2个值,代表上下内边距是5像素,左右内边距是10像素
padding:5px 10px 20px; 3个值,代表内边距5像素,左右内边距10 下内边距为20
padding:5 10 20 30 上5 右边10 下20 左30 顺时针
当我们给padding指定两个值后,发生2个事情
1 内容与边框有距离
2也会影响盒子实际大小
会撑大我们的盒子
如何盒子本身没有指定width或者height属性,则此时padding不会撑开盒子大小
外边距margin
控制一个盒子与另一个盒子之间的距离
margin-left
margin-right
margin-top
margin-bottom
margin简写方式和我padding是一样的
外边距典型应用
外边距可以块级盒子水平居中,但是满足两个个条件
1 盒子必须有宽
2 盒子左右的外边距设置为auto
header{width:960px:margin:0 auto;}
margin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto;
以上方法是块元素水平居中,行内元素和行内块元素水平居中给父元素添加text-align:center;
外边距的合并
使用margin定义元素的垂直外边距时,可能会出现外边距的合并;
1 相邻块元素垂直外边距的合并
当上下的两个块元素相遇时,如果上面的元素有下外边距margin——bottom 下面的元素有上外边距
margin——top,则他们之间的垂直间距不是margin——bottom与margin——top之和,取两个值中的较大这这种
现象称为相邻元素垂直外边距的合并
解决方案
尽量只给一个盒子添加margin值
2 嵌套块元素垂直外边距的塌陷
当两个嵌套元素(父子关系)的块元素,父元素有上边距同时子元素也上外边距,此时父元素会
塌陷较大的外边距值
注意 子盒子浮动了 如果加上外边距就不会有塌陷问题。
解决方案
1 可以为父元素定义上边框
2 可以为父元素定义内边距
3 可以为父元素添加 overflow-hidden
清除内外边距
网页元素很多都带有默认的内外边距 而且不同浏览器默认的也不一致 因此我们在布局前,
首先要清除网页元素的内外边距
- {
margin:0;
padding:0;
}
注意:行内元素比较特殊为了照顾兼容性,尽量设置左右内外边距,不要设置上下内外边距,但是
转换为块级和行内块元素就可以了。
去掉li前面的小圆点
list-style:none;
圆角边框
在css3中,新增加圆角边框样式,这样我们的盒子就可以变圆角了
border-radius:length;
参数值可以是数值或者百分比的形式
1 如果做一个圆形的盒子那就是先做一个正方形然后我们在指定radius大小值是款或者高的一半
如果宽高很复杂 就是设置50%
2 如果是一个矩形,设置为高度的一半就可以了。
3该属性是一个简写属性,可以跟四个值,分别代表 左上角 右上角 右下角 左下角。
两个值 对角线关系;
4 如果改变一个角呢
border-top-left-radius 左上角 等等等
盒子阴影
我们可以用box-shadow属性为盒子添加阴影
语法格式
box-shadow;h-shadow v-shadow blur spread color inset;
h-shadow 必需 水平阴影的位置,允许负值
v-shadow 必需 垂直阴影的位子 允许负值
blur 可选,模糊距离
spread 可选,阴影尺寸
color 可选, 阴影的颜色,
inset 可选,将外部阴影outset该内部阴影
1 默认是外阴影outset 但是不可以写这个单词,负责导致阴影无效
2 盒子阴影不占空间,不会影响其他盒子排列
文字阴影
text-shadow
语法格式
box-shadow;h-shadow v-shadow blur color;
h-shadow 必需 水平阴影的位置,允许负值
v-shadow 必需 垂直阴影的位子 允许负值
blur 可选,模糊距离
color 可选, 阴影的颜色,
css浮动
1.1 传统网页布局的三种方式
网页布局的本质-用css来摆放盒子 。把盒子放到相应的位置
css提供了三种传统的布局方式(简单说就是盒子如果进行排列顺序);
1 普通流(标准流)
就是我们标签按照默认规定好进行排列
1 块级元素会独占一行,从上到下顺序排列
div hr p h1-h6 ul ol dl form table
2 行内元素
span a i em
以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式
2 浮动
为什么要浮动
1 如何让多个盒子div水平在一行
比较难,虽然转换我们的行内块 之间有空隙
2 如果让两个盒子左右对齐
总结;很多的布局效果 标准流是办法完成的,此时我们可以利用浮动完成布局,因为
浮动可以改变元素标签默认的排列顺序
浮动最典型的应用 :可以让多个块级元素一行内排列显示.
重要 重要 网页布局第一准则:多个块级元素纵向找标准流,多个块级元素横向排列找浮动
第二准则:先设置盒子大小,之后设置盒子的位置。0
1 什么是浮动
属性用于创建浮动框 将其移动到一边 直到左边缘或者右边缘处及包含块或者另一个
浮动框的边缘。
语法:
选择器{float:属性值;}
none 元素不浮动
left 元素向左浮动
right 元素向右浮动
2 浮动特性(重难点)
加了浮动之后的元素,会具有很多特性,需要我们掌握的
1 浮动元素脱离标准流
1 脱离标准流的控制(浮)移动到自定位置(动).称为脱标。
2 浮动的盒子不再保留原先的位置。
2 浮动的元素会一行的显示并且元素顶部对齐
如果多个盒子都设置了浮动,则它们会按照属性值一行显示并且对端对齐排列。
注意 浮动的元素是互相贴在一起动不会有空隙
如果父级宽度装不下这些浮动盒子 ,多出的盒子会
另起一行显示。
3 浮动的元素具有行内块元素的特性
任何元素都是可以添加浮动,不管你是什么模式的元素,添加浮动之后具有行内块元素的
相似的特性。
如果块级元素没有宽,默认宽和父级一样,但是添加浮动之后,他的大小根据里面的内容来决定
浮动的盒子中间没有缝隙,是紧挨在一起的
行内元素同理。
1.6 浮动元素经常跟我们的标准流搭配使用
为了约束浮动元素位置,我们网页经常布局上=是一般采取:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
最常见的网页布局
1
top
banner
margin
footer
2
注意点
1 浮动与标准流的父盒子一起搭配使用
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2 一个元素浮动了 理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流 ,不会影响前面的标准流。
如何清理浮动?
我们前面一些浮动元素有一个标准流的父元素,他们有一个共同的特点:高度一样,但所有必须是这样吗?
理想状态是: 让盒子撑开父元素,有多少孩子,我父盒子就有多高。
这样有问题吗?
为什么要清除浮动?
由于父盒子很多情况,不方便给高度,但是盒子浮动有不占位置,最后父盒子高度为0时,
就会影响下面的标准流盒子。
1 父级没高度
2 子盒子浮动了
3 影响下面的布局
由于浮动元素不再占用原文档的位置,所以他会对后面的元素排版产生影响。
清除浮动的本质
清除浮动的本质上清除浮动元素造成的影响
清除浮动之后,父级会浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流
选择器{clear:属性值;}
left 不允许左侧有浮动的元素(清除左侧浮动的元素)
right不允许右侧有浮动的元素(清除右侧浮动的元素)
both 同时清除左右两侧浮动的影响。
我们工作中个,几乎只用both
策略是:闭合浮动.
清除浮动的方法
1 额外标签法也成隔墙法,是w3c推荐的做法
在浮动元素末尾添加一个空的标签,例如
,或者其他的标签(如br等)优点:通俗易懂 ,书写方便
缺点:添加许多无意义的标签,结构化比较差
注意 要就这个新的空标签必须是块级元素。
2 父级添加overflow属性
可以给我们父级添加overflow属性 将值设置为 hidden auto scoll.
子不教,父之过。 有些盒子可能被切掉。
3 父级添加after伪元素
after方式是额外标签法的升级版 也是父元素添加
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
/* IE6或者7浏览器的时候 */
*zoom: 1;
}
4 父级添加双伪元素
也是给父元素添加
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6或者7浏览器的时候 */
*zoom: 1;
}
ps 最好切图
cutterman是一款ps的插件 能够自动将你需要的图层进行输出,以替代传统的手工“导出web所用格式”
以及使用切片工具进行挨个切图的频繁流程。
css属性的书写顺序
建议如下
1 布局定位属性 display position float clear visibility overflow 建议display第一个写,毕竟关系到模式
2 自身属性 width height margin padding border background
3 文本属性 color font text-decorate… text-align vertical White-spance break-Word
4 其他属性css3 content cursor border-radius box-shadow text-shadow background-gradient
页面布局的整体思路
为了提高网页制作的版心 ,布局通常由以下的整体思路。
1 必须确定页面的版心 ,我们测量可得知。
2 分析页面中的行模块,以及每个页面页面中的列模块,其实页面布局的第一准则。
3 列模块多宽多高 那一个位置
4 制作HTML的结构,我们还要遵循,先有结构,后有样式点原则,结构最重要
5 所以,先理清楚布局结构,在写代码有位重要,这需要我们多写多积累。
导航栏头部制作
实际开发中,我们不会直接用链接a而且用例li 包含我们的链接a的做法
1 li+a语义更清晰 一看就是有条有理的列表内容
2 如果直接用a 搜索引擎更容易辨别为有堆砌关键字嫌疑 (故意堆砌关键字容易被搜素引擎有降权的风险)
从而影响网站排名。
注意
让导航栏一行显示,给li夹浮动,li是块级元素,需要一行显示
这个nav导航栏可以不给宽度 将来可以添加其余的文字
因为导航栏里面的文字不一样多,所以最好给链接a左右padding撑开盒子,而不是指定宽度。
3 定位