记住这些足以胜任前端开发
html5学习心得总结 纯粹干货 思想性的总结
常识:
div 块级标签
span a p 行内标签
1.css两个原则
a.就近
b.叠加 指的是 后者会补充前者没有的属性
后者如果有前者的属性则根据优先级进行替换
!important优先级比较大
2.id选择器 > 类选择器 > 标签选择器
类比java 调用顺序 肯定是 static > 类构造 > 普通函数
3.标签选择器 分类
a.行内标签
b.块级标签
c.行内-块级标签
补充:
块级 指的是 有宽高属性的区域
4.几种常见用法
a.让行内标签变成块级标签
display: block;
width
height
b.块级标签变成行内标签
display:inline
去掉width Height属性
行内默认inline
块级默认block
c.如果不希望显示
display:none
d.行内变成行内块级
display: inline-block;
width
height
e.块级变成行内块级
display: inline-block;
去掉width height
总结:
只需要记住
行内默认inline
块级默认block
缺啥补充啥
5. 不透明度 opacity: 0.2
box-shadow 红色 绿色 蓝色 透明度
background-color: rgba(255,0,0,1.0);
6. 设置圆角 设置文字阴影
现用现查询 text-shadow corner-radius 猜测即可
7.
div{
background-color: red;
width: 250px;
height: 250px;
margin: 130px;
/*设置边框: 边框宽度 边框样式 边框颜色*/
border: 10px solid green;
/*内边距: 上右下左*/
padding:20px 40px 100px 20px;
}
外边距 margin 相对于 0.0 原点
内边距 padding 相当于向里面塞东西,让盒子变大
border 边界 现用现查
8.两种居中
标签水平居中:
行内标签, 行内块级标签: text-align: center;
块级标签: margin: 0px auto;
标签垂直居中:
line-height: 400px;
记住即可,避免错误。
一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行