web 学习

Posted 2020-12-05 GCat

重要得之前的知识
浏览器

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%