显示模式转换
- 块级标签转为行内标签模式
div {
display:inline;
}
- 行内标签模式转为块级模式
span {
display:block;
}
- 行内标签模式转为行内块模式
a {
display:inline-block;
}
单行文字垂直居中
原理: 行高的上空隙和下空隙把文字挤到中间了,是如果行高小于盒子高度，文字会偏上，如果行高小于盒子高度，则文字偏下，上下空隙和和平均分布
//盒子高度40px
p {
line-height:40px
}
背景图片
- 背景各个属性的应用
img {
//引入
background-image:url(images/icon.png);
//不平铺
background-repeat:no-repeat;
/*方位 x、y x是left/right，自动转换，top/bottom 不论顺序,自动转换，可省略一个，那么另一个就是center */
//background-position:left center
/*还可以是精确位置 如果写了精确位置,那么第一个一定是x，第二个一定是y*/
//background-position:20px 20px
/*还可以是混合，如果写了混合位置,那么第一个一定是x，第二个一定是 y*/
background-position:20px center
/*参数 scroll(滚动，默认)和fixed(固定)*/
background-attachment:fixed //背景图像固定
}
背景的简写
- background:背景颜色,背景图片地址,背景平铺 背景图像滚动,背景图片位置。
body {
background:black url(images/bg.jpg) no-repeat fixed center top;
}
tips:以上没有特定的顺序，只是按这习惯写
背景的半透明
img {
background:rgba(0,0,0,0.3) 后面必须4个值
}
css的三大特性
- 层叠性
p {
color:red;
}
p {
color:blue;
}
//最后p是blue颜色 后面的颜色覆盖前面的颜色
- 继承性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)和文字相关的才会继承
/* /1.5 那么行高就是12*1.5*/
body {
font:12px/1.5
}
div {
/*子元素继承了父元素body的行高1.5*/
/*这个1.5就是当前元素文字大小font-size的1.5倍 所以当前的div的行高就是21元素*/
font-size:14px;
}
<body>
<div></div>
</body>
优先级
- tips: 权重是由4组数字组成，但是不会有进位。 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器，依次类推。
等级判断从左到右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符合继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important
无穷大 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加
- 复合选择器会有权重叠加的问题，但注意不会有进位
div ul li ----> 0,0,0,3
.nav ul li ----> 0,0,1,2
a:hover ----> 0,0,1,1
.nav a ----> 0,0,1,1
盒子模型
- 边框
边框会影响盒子的实际大小我们有两种方案解决:
测量盒子大小的时候，不量边框。
如果测量的时候包含了边框，则需要width/height 减去边框宽度
padding
/*三个 第一个是上 中间是左右 最后一个是右*/
div {
padding:10px 20px 30px
}
padding 会影响盒子的实际大小
，因此我们有以下方案解决:
如果测量的时候包含了边框，则需要width/height 减去边框宽度
margin
margin的典型应用，应用于块级盒子水平居中对齐
div{
//必须有个宽度
width:900px;
height:200px;
background-color:red;
//上下没有边距 左右设置auto
margin:0 auto;
}
嵌套块元素坍塌
- 当盒子里嵌套着盒子的时候，在里外盒子都设置margin，会使得边距合并，使得父盒子一起移动了,里面的间距看不到了;
解决方案：
1.可以为父元素定义边框(会增大盒子)；
2.可以为父元素定义内边距(会增大盒子);
3.可以为父元素添加overflow:hidden。(推荐，不增大盒子)
4.浮动、固定、绝对定位的盒子不会有塌陷问题
清除内外边距
- 不同浏览器的不同元素、标签的内外间距都不同，可以使用以下方法来清空，解决问题。
- {
padding:0;
margin:0;
}
tips:
padding有个特殊情况 如果没指定宽度或高度padding不会撑大盒子的宽或高,孩子如果没有指定宽度或高度，父亲有宽度或高度，孩子设置了padding也不会撑开盒子,注意以上水平居中方法只属于块级使用方法，
要让行内元素和行内块元素水平居中可以使用在行内元素和行内块元素的父级添加text-align:center
行内元素为了照顾兼容性，尽量只设置左右内外边距，上下设置了也不起作用，但是转换为块级和行内块元素就可以了。
圆角边框(css3)
- 原理: radius 半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
div {
border-radius:20px;
}
正方形变圆
div {
width:200px;
height:200px;
border-radius:50%;
/或者把数值改成高度或宽度的一半/
//border-radius:100px;
}
矩形变圆
div {
width:200px;
height:100px;
/*如果是个矩形，设置为高度的一半*/
border-radius:50px;
}
tips: border-radius后面参数值简写，分别代表左上，右上，右下，左下。
盒子阴影(css3)
div {
width:200px;
height:200px;
box-shadow:10px 10px
}
6个参数值(从左到右)
tips:
默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。
文字阴影(css3)
span {
font-size:50px;
color:red;
font-weight:700;
text-shadow:10px 10px;
}
4个参数值(从左到右)
浮动
- 浮动语法
div {
float:left //或者right
}
设置了浮动的元素的最重要特性:
脱离标准普通流的控制(浮) 移动到指定位置(动),(俗称脱标/脱离文档流)
浮动的盒子不再保留原先的位置
无论任何属性的标签都会变成具有行内块元素的特性
设置浮动后就不继承了父类的宽度，根据内容来决定的
浮动的盒子中间是没有缝隙的，是紧挨在一起的
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟也应该浮动起来，以防止引起问题。
浮动的元素不会压住下面标准流盒子内的文字，但会压住下面的盒子，浮动产生的目的最初是为了做文字环绕效果的
清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动，脱离文档流又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，所以需要清除浮动。
/*1.额外标签法,也称为隔墙法，找到浮动的最后一个元素后再加个标签,必须是块级元素标签*/
.clear {
clear:both;
}
/*2.可以给父级添加overflow,缺点,无法显示溢出的部分*/
.box{
overflow:hidden;
}
/*3.可以给父级添加:after*/
.clearfix:after {
//伪元素必须写的属性
content:'';
//插入的元素必须是块级，伪元素是行内
display:block;
//不要看见这个元素
height:0;
//核心代码清除浮动
clear:both;
//不要看见这个元素
visibility:hidden;
}
/*4.双伪元素清除浮动*/
.clearfix:before,
.clearfix:after
{
content:'';
display:table;//转换为块级，并在同一行上显示
}
.clearfix:after {
clear:both;
}
<div class='box clearfix'>
<div class='item1'>item1</div>
<div class='item2'>item2</div>
<div class='clear'>item2</div>
<div>
tips:
浮动元素经常和标准流进行搭配使用，用标准流排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。
需要清除浮动的原因:父级没高度；子盒子浮动了；影响下面布局，我们就应该清除浮动了。
9304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
