CSS 属性区别及常见问题
块级元素,行内元素区别
| 块级元素 | 行内元素 |
|---|---|
| div | span |
| h1~h6 | a |
| p | img |
| dl | b,i |
| dd | button |
| dt | em |
| fieldset | label,select |
| form | input,textarea |
| hr | br |
| blockquote | q |
| ul | small |
| table | th,td |
| li | sub,sup |
区别：
- 块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，其宽度是根据内容而变化，如果和相邻的内联元素排不了一行会自动跳行 - 块级元素可设置宽高，行内元素不行
- 块级元素可设置margin 和 padding，行内元素只有水平方向的属性才能有效果，垂直方向无效如（margin-top,margin-bottom）
- 块级元素可嵌套某些块级元素和内联元素以及文本，内联元素只能容纳文本或者其他内联元素
CSS 继承
css的继承是指子元素拥有祖先元素的样式
| 可继承属性 | 不可继承属性 |
|---|---|
| color | border |
| opacity | padding |
| font | margin |
| text-align | display |
| line-height | background |
| cursor | text-decoration |
表单元素不会继承字体属性，需要单独设置
使元素水平居中
块级元素 margin:auto
内联元素 text-align:center
px, em, rem 有什么区别
- px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。不随着父元素而改变，是固定的。不用去计算
- em：相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。需要计算，比较麻烦
- rem：相对单位，相对根元素的字体大小，可以说集px和em
优点于一身，只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
IE盒模型和W3C盒模型有什么区别
在IE6之前的浏览器版本才会出现IE盒模型问题
区别在于width的计算，W3C盒模型不包含内边距和边框的宽，IE盒模型则是包含内边距和边框的宽。
这让我想到一个属性box-sizing: border-box;使用它给元素设置width，就类似IE盒模型，固定宽，设置的边框宽度和内边距宽度都会包含在width里面，当然 如果设置的边框宽度和内边距宽度超出本身宽度范围，会溢出
line-height: 2和line-height: 200%有什么区别
这个问题就和 line-height：number 、line-height：% 有什么区别一样。
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
% || em：基于当前字体尺寸的百分比行间距。
length：带有单位如px，设置固定的行间距。
normal：行高由浏览器默认设置。
overflow、display、visibility的区别
他们都能让元素隐藏。
-
overflow:hidden;是当内容超出父元素所能包含的宽度的时候隐藏 -
display:none;隐藏元素不占据位置,脱离文档流 -
visibility:hidden;隐藏元素但占据位置,不脱离文档流
visibility特别之处是就算父元素隐藏了，但子元素设置 visibility:visible;还可以显示。
使用inline-block 左右会有间距 也会导致高度不一
inline-block：行内块元素，拥有内联和块级的优点，可以并排显示也可设置margin、wiidth、height。
- 解决间距
1.在编译器里面不换行，去掉多余空格
<div class="box">
<a href="#">
学习</a><a href="#">
css</a><a href="#">
属性</a>
</div>
2.借助HTML注释
<div class="box">
<a href="#">学习</a><!--
--><a href="#">css</a><!--
--><a href="#">属性</a>
</div>
3.不要闭合标签，除了最后一个
<div class="box">
<a href="#">学习
<a href="#">css
<a href="#">属性</a>
</div>
不符合代码规范
4.margin负值
.box a{
display: inline-block;
margin-right: -5px;
}
你真的愿意计算？
5.display:flex
.box {
display: -webkit-flex;
display: flex;
}
弹性盒子布局，如果兼容老手机，请在父元素里添加display:-webkit-box;
6.设置父元素字体为0
.box {
font-size: 0;
-webkit-text-size-adjust:none; //考虑兼容i7
}
.box a {
font-size: 12px;
}
感觉最好用的就是6了
- 解决高度不一
使用 vertical-align
.box a{
vertical-align:top;
}
- 解决img有空隙问题
img{
vertical-align: middle;
}
font属性
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
字体名称有连字符“-”或" "空格，或字符时应该加引号，防止有些浏览器解析的时候不认识。
'\5b8b\4f53' 指的是字体，这么写是因为有些编码和浏览器的编码不匹配，如果直接写汉字会乱码，导致字体设置失效的问题，把字符串转义，就不会出现这个问题。
- 单行文本溢出变省略号
给元素设置固定高，一般情况溢出会换行并超出父元素，先给它一个溢出隐藏，和强制不换行，在设置一个省略符号的属性
p{
font-size:14px;
height:16px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
-
css渐变色
background: linear-gradient(to top, pink, burlywood);
最好使用十六进制颜色 -
文字描边
p{
-webkit-text-stroke:1px #f00;
}
IE和火狐不支持，基于webkit内核，都得加前缀
- 修改 placeholder 颜色
element::-webkit-input-placeholder,
element:-ms-input-placeholder,
element::-moz-placeholder{
corlor: pink;
}
-
设置页面标题的图标
<link rel="icon" href="路径" type="image/x-icon">
图标类型要 icon -
清除下拉框的箭头
appearance: none;
-moz-appearance:none;
-webkit-appearance:none;
- 使被选中元素的文本改变样式 只有background-color,color 有效
::selection {
background:pink;
color:#fff;
}
::-moz-selection {
background:pink;
color:#fff;
}
::-webkit-selection {
background:pink;
color:#fff;
}
- 为父元素设置透明度 子元素才不会继承
给父元素添加 background-color 属性，然后再写opacity,子元素会继承透明度，但直接给父元素的值设置 rgba,将不会被继承
div {
line-height: 1.5;
width: 260px;
color: pink;
background-color: rgba(0, 0, 0, .1);
}
- 在IE下 透明度私有设置
filter:alpha(poacity=0~100) - 父元素包含不了子元素
有使用浮动属性( float )
定位属性 （absolute,fixed）
解决方法：
- 给父元素设置固定宽度
- 利用js获取子元素高度来设置父元素高度
- 清除浮动
ele::before,
ele::after {
content : "";
display: block;
height: 0;
clear: both;
}
ele{
zoom:1;
}
不止这一种清除浮动的方法 根据你自己喜欢去用其他的
-
不想button元素点击就自己提交表单
button 默认有两个属性 1.提交表单按钮，2.普通 点击按钮 浏览器默认是提交表单按钮，如果不想提交 要设置 type 类型。type="button" -
相对元素定位的问题
刚开始了解css的时候 看到网上说，要父元素设置定位属性的relative。子元素设置absolute，子元素才会相对父元素进行绝对定位，其实没说全，令我产生 只有子元素设置absolute，父元素设置relative，才会起效，对于初学者 有这种误解 那就一直踩坑。
后来自己测试，发现父元素除了static这个值，子元素都会相对父元素进行自身定位，如果父元素没有除了static以外的值，会自动往上层查找元素是否有定位属性 再来进行参照物进行自身的定位。 -
设置滚动条样式
ele::-webkit-scrollbar {} -
pattern属性 h5新特性
可以设置pattern的值为正则字符串，并加上设置title，提交表单的时候不用单独写js可以验证。错误提示会输出title的值
用 CSS 实现一个三角形
css.png
简单实现风车
.box {
position: relative;
width: 80px;
height: 75px;
z-index: 10;
animation: around 1s linear infinite
}
@keyframes around{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.winnower {
position: absolute;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-width: 12px;
border-top-color: lightskyblue;
top: 50px;
}
.winnower:nth-of-type(1) {
top: 0;
left: 5px;
transform: rotate(90deg);
}
.winnower:nth-of-type(2) {
top: 35px;
left: 0;
}
.winnower:nth-of-type(3) {
top: 5px;
left: 40px;
transform: rotate(180deg);
}
.winnower:nth-of-type(4) {
left: 35px;
top: 40px;
transform: rotate(270deg);
}
.stick {
position: absolute;
background-color: pink;
width: 6px;
top: 45px;
left: 45px;
height: 70px;
border-radius: 50px;
}
效果图
CSS sprite
CSS Sprites（雪碧图）是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
优点：
- 减少网页的http请求，提高性能
- 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
- 减少了命名困扰：只需要在一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
- 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
缺点：
- 自己合成图片比较麻烦
- 背景设置时，需要得到每一个背景单元的精确位置
在线生成工具https://www.toptal.com/developers/css/sprite-generator
