块级元素,行内元素区别
块级元素 | 行内元素 |
---|---|
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
网友评论