码迷,mamicode.com
首页 > Web开发 > 详细

web 学习

时间:2018-07-18 23:15:20      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:行间样式   res   list   size   margin   important   内联   google   html   

重要得之前的知识
浏览器

shell 内核
外表 内心

IE trident
Firefox Gecko
google chrome webkit/blink
safari webkit
opera presto

css 权重
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符

!important Infinity 正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0


1000和100 256进制
一位工程师手测试出来的

浏览器父子选择器的内部原理是由右到左查找

设置字体大小实际上是设置字体的高
三角形用的是border设置


段落 text-indent: 2em;
1em = 1 * font-size

1.行级元素/内联标签 display:inline
feature:内容决定元素所占位置
不可以通过css改变宽高
span strong em a del

2.块级元素 display:block
feature:独占一行
可以通过css改变宽高
div p ul li ol form address

3.行级块元素 inline-block
feature:内容决定大小
可以改宽高
img

凡是带有inline的元素,都有文字特性

代码压缩,去掉了空格回车,所以img不能用margin调节间距



先定义功能(先写CSS)非常重要!
em可以自定义功能

a标签去掉下划线:text-decoration:none;
ui标签去掉圆点:list-style:none;
padding:0;
margin:0;

通配符用法
初始化标签
*{
padding:0;
margin:0;
text-decoration:none; ?
list-style:none; ?
}




盒子模型

盒子三大部分

盒子壁 border

内边距 padding

外边距 margin

盒子内容 width + height



padding : 四个参数:上 右 下 左 三个参数:上 左右 下 两个参数:上下 左右 一个参数:全都有

body的margin 默认为8px

position

absolute
脱离原来位置进行定位
相当于最近的有定位的父级进行定位
如果没有,那么相对于文档进行定位
relative
保留原来位置进行定位
相当于自己本身原来的位置进行定位
fixed
固定定位
用relative作为位置,用absolute进行定位

居中:
html:
<div></div>
css:
div{

positoin:absolute/fixed; a..相对于文档中间 f..相对于浏览器中间
left:50%;
top:50%;
width:100px;
height:100px;

margin-left:-50px;width * 0.5
margin-top:-50px;height * 0.5

}

z-index:*; position 层的优先显示

border-radius:50%


web 学习

标签:行间样式   res   list   size   margin   important   内联   google   html   

原文地址:https://www.cnblogs.com/GhostCatcg/p/9332904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!