1、常用属性
【不可以继承的属性
display: inline block inline-block table-cell none
文本属性: vertical-align 垂直文本对齐 text-decoration 规定添加到文本的装饰 a标签的默认下划线
text-shadow :文本阴影效果
white-space:空白符的处理
unicode-bidi: 设置文本的方向
可以继承属性
文字系列样式属性 font
font-family:字体系列
font-weight:字体粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
文本系列样式属性
text-align 文本水平对齐 line-height 行高 text-indent 文本缩进
word-spacing:单词间的空白(字间隔)
letter-spacing:字符间的空白(字符间距)
text-transform :控制文本大小写
direction:规定文本的书写方向
盒子模型: 宽度和高度
width
height
宽度和高度的单位
1、px 像素 固定单位
2、% 百分比 动态计算的单位(自适应 响应式)
padding
内边距会影响盒子在浏览器中的实际大小
padding:10px 上 右 下 左 都是10px
padding: 10px 20px 上下都是10px 左右都是20px
padding: 10px 30px 20px 上 10px 左右 30px 下 20px
padding:10px 20px 30px 40px 上 10px 右 20px 下 30px 左 40px
border
边框的宽度 边框线类型 边框线的颜色
边框线类型
solid:实线
dashed: 虚线
dotted:点状线
边框的颜色 黑色 白色
颜色的英文名 black white
# #000 #fff
rgb rgb(0,0,0) rgb(255,255,255)
border: 10px solid #000 如果没有指明方向的情况下 表示四个方向都有边框线 而且边框线相等
border-top border-right . border-bottom border-left
border-style 形状 border-color 颜色
去掉边框线 border:0
如果border属性 只有边框宽度 没有边框线的类型和颜色 导致border属性失效
2、三角形原理
利用border的3个属性: border-width/border=style/border-color去实现 宽度和高度要为0 实现一个由小三角形组成的正方形
要什么方向的三角形 只需要保留这个方向的颜色色值 其余的方向的颜色色值 设为透明即可
.triangle {
width :0;
height:0;
border-width:100px;
border-style:solid;
border-color: red transparent transparent transparent
}
transparent: 颜色透明
三角形的大小 由border-width 边框线的宽度去控制
三角形的颜色 由border-color 边框的颜色去控制
transform:rotate(180deg);旋转180度
border-radius:40px
3 margin面试题
margin 面试题 （并列的两个子元素）
一个盒子有上边距 另一个有下边距 会出现margin边距的重叠问题
并列盒子的margin重叠 双margin的重叠
取大值 并不是他们的相加之和 也就是谁大听谁的
margin的兼容问题:(父元素和子元素的margin-top传递问题)
大盒子里嵌套小盒子 给小盒子加margin-top值 不但没有实现和大盒子之间的间距 反而传递到大盒子身上 导致整体下移
=> 解决兼容问题：
1、overflow: hidden 解决margin-top的传递问题（此处并不是溢出隐藏）
2、padding-top: 1px 这种方式会影响最后实际的高度 需要在高度height基础上减掉 才不会影响最后实际的高度
3、border-top: 1px solid transparent (设置为透明色) 这种方式会影响最后实际的高度 需要在高度height基础上减掉 才不会影响最后实际的高度
4、给子元素的margin-top值改为给父元素加padding-top 这样就避免了使用margin-top值导致的传递问题
.wrap {
width: 300px;
height:299px;
backgroud-color:red;
padding-top:1px
}
.inner {
width:200px;
height:200px;
margin-top:20px;
background-color:blue
}
margin 负值的使用技巧
.left {
float:left;
width:500px;
height:800px;
backgroud:red;
font-size:50px;
}
.right {
float:left;
width:800px;
height: 800px;
backgroud: darkgreen;
margin-left: -1300px (两者宽度之和)
}
1、margin外边距 padding内边距
2、margin不会影响最后元素的实际宽高 padding是会影响最后元素的实际宽高的 如果要不影响 我们需要在width、height里减去padding的值
3、margin主要用来控制元素和元素之间的间距 padding不能控制元素和另一个元素间的间距 只能控制它里边的元素
4 盒子模型的计算
元素实际宽度 = 宽度width + padding-left/padding-right + border-left/border-right
元素实际高度 = 高度height + padding-top/padding-bottom + border-top/border-bottom
口号:元素的实际大小只会受padding和border的影响 和margin没有半毛钱关系
如果加了padding和border的值 要在width和height上减去padding和border的值 否则内容会溢出
border-left:40px 这样设置 不生效 因为缺少border-style 和border-color这两个属性
text-align 表示文本的对齐方式
center 居中对齐
left 居左对齐
right 居有对齐
text-align:center 控制文本内容居中
margin: 0 auto 控制块级元素居中
height和line-height一致 文字内容垂直居中
line-height 用来控制行间距(一行文字和一行文字垂直的间距)
5 backgroud相关属性
backgroud-color: transparent 默认颜色是透明色
backgroud-image 背景之 背景图片
backgroud-image:url("背景图片的路径")
backgroud:url("背景图片的路径")
logo 一般 都会用h1标签
<h1 class="logo"> <a href="#">背景图片</a></h1>
.logo a {
display: block; // a标签是行内元素 转化为block元素 宽度和高度 才能生效
width: 173px;
height: 66px;
backgroud-image: url(http://www.zhufengpeixun.com/skin/20142/image/logo.png);
text-indent: -9999px; /*首段缩进 将看不到背景图片这几个字*/
}
backgroud-repeat:背景重复(平铺的方式)
默认值 repeat(x/y轴同时平铺)
no-repeat 不平铺(重复)
repeat-x x轴平铺
repeat-y y轴平铺
<h1 class="logo"></h1>
.logo {
width: 300px;
height: 300px;
backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png")
}
这样会出现很多重复的背景图 x轴和y轴都有
将backgroud-repeat:no-repeat 能解决这个bug
<div class = "nav"></div>
.nav {
情况：navbj这个背景图片 正好是42px 所以我们不写backgroud-repeat 它也是只有x轴方向的平铺 因为y轴没有多的高度去平铺
但是如果height跟navbj不相等的情况下 我们不写backgroud-repeat会出现除了x轴平铺之外 y轴也会看到平铺的效果 所以我们最好在backgroud的图片后面紧跟着要指明平铺的方式
width:100%;
height:42px;
backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/navbj.png")
backgroud-repeat:repeat-x;
//可以合并成 background:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png") no-repeat
}
backgroud-position: x轴的坐标(水平方向) y轴的坐标(垂直方向) x轴越大 越往右 y轴越大 越往下
50% 50% center center 正中心的位置
backgroud-position:背景定位 规定背景图片的起始坐标点(位置) 单位:px (像素) % (百分比) 方位(top、bottom、left、right、center)
方位只指明x轴 没有y轴 默认y轴为center
百分比只写x轴 50% y轴默认也是50%
backgroud-position:left ===> 则代表left center
backgroud-position:right ===> 则代表right center
复合形式 写法
backgroud:#3385ff url(http://www.zhufengpeixun.com/skin/20142/img/logo.png) no-repeat center center
backgroud-attachment 背景关联
1、scroll 背景随着页面滚动条的滚动而滚动(默认值)
2、fixed 背景不会随着页面滚动条的滚动而滚动 固定不动
背景类:背景尺寸 backgroud-size:x轴的尺寸大小 y轴的尺寸大小 px 100% 不允许为负值
auto 自动 背景图片原来的尺寸
cover 覆盖 背景图片会等比例伸缩 到完全覆盖盒子大小为止 ---- 会出现被拉伸 变虚
contain 背景图片会等比例拉伸 只要有一条边 触碰到盒子的任何一条边 它就会停止缩放 ---- 会出现留白
背景类:背景裁剪 backgroud-clip
content-box:从内容区域之外开始裁剪(裁剪掉的是内边距和边缘区域)
padding-box: 从内边距区域之外开始裁剪(不包括内边距 裁剪掉的是边框区域)
border-box:从边框线之外开始裁剪(不包括边框线)
backgroud-origin设置背景图像的参考原点(位置)
border-box: 从border区域(含border)开始显示背景图片
padding-box: 从padding区域(含padding)开始显示背景图像
content-box: 从content区域开始显示背景图像
backgroud-size backgroud-origin backgroud-clip css3新增的属性 不能写成backgroud的复合形式
雪碧图
技巧:backgroud-position x轴 y轴
雪碧图的坐标主要是负值 默认值是 0 0
overflow:hidden的3个作用
1、溢出隐藏(超出内容之外的部分给隐藏起来)
2、用来清除浮动元素产生的影响
3、解决margin-top的传递问题
6 如何让多个元素在一行显示
面试题:如何让多个元素在一行显示
<div class = "wrap">
<div class="content1">内容1</div>
<div class="content2">内容2</div>
</div>
.wrap {
font-size:0;
}
.content1 {
display:inline-block;
*display:inline;/*css hack* ie浏览器可以识别/
*zoom:1;/*触发css hack的layout*/
width: 200px;
height: 100px;
backgroud-color:darkblue;
font-size:14px;
}
.content2 {
display:inline-block;
*display:inline;/*css hack* ie浏览器可以识别/
*zoom:1;/*处罚css hack的layout*/
width: 200px;
height: 100px;
backgroud-color:darkblue;
font-size:14px;
}
1、用display:inline 把元素转化为行内元素 但是设置宽高属性不起作用
2、用display:inline-block 可以让元素在一行显示 但是它会受空格/换行键的影响 会产生默认的间距
===>解决办法
A)、去掉空格和换行键的影响 让标签都在一行(这种方法不推荐 阅读性差)
B)、给加了display:inline-block属性的元素的父元素加一个属性font-size:0; 但是我们发现一个问题:元素里面如果有文字 文字消失了
===>解决:我们只需要在元素身上加一个font-size把父元素font-size:0覆盖
其中display:inline-block在ie6 7下不兼容的解决办法 (css hack兼容)
在两个子元素里加 *display:inline *zoom:1
3、利用浮动float:left/right 但是我们需要清浮动
7 省略号的面试题
面试题:如何出现单行省略号
h2 {
1、width 宽度(不写宽度 默认继承父元素的宽度)
2、overflow:hidden 溢出隐藏
3、white-space:nowrap 强制不折行
4、text-overflow:ellipsis 文字隐藏的方式:以省略号的方式隐藏
}
面试题:多行文本出现省略号的必备条件:主要用在移动端手机页面
h2 {
width:600px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2
overflow:hidden;
}
- 动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
- 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!
