css学习笔记

    
        
        
    
    
        
hello world
    

    
        
        
        
    
    
        
hello world
    

    
        
        
        
    
    
        
hello world
        总结：样式就这三种，本笔记样例都是内部样式，实际开发用外部样式
    



style.css

h1{
    color: red;
}

    
        
        
        
    
    
        
标签选择器
        
类选择器
        
id选择器
        后代选择器
    

    
        
        
        
    
    
        
后代选择器-红，子选择器-黄（就近原则）
        
相邻弟弟选择器-绿
        

            

                
后代选择器-红
            
        
        
通用弟弟选择器-蓝，后代选择器-红，子选择器-黄（就近原则）
        

        上面的四个组合选择器不一定用标签组合，也可以用.class与#id
        

        就近原则：哪个style定义离标签近就用哪个
        （前面的内部样式与外部样式也是就近原则，但行内标签绝对是最高优先级）
    

    
        
        
        
    
    
        
h1
        
p1
        
p2
        
p3
        

            
li1
            
li2
            
li3
        
        a
        

        注释中用元素而不用标签是因为元素可以是.class或#id
    

    
        
        
        
    
    
    

        
        
        3
        4
        5
        6
        7
        8
        9
        10
    
    

    总结：选择器到此结束，其实没什么难的，就过两眼留个印象，顺带一提，事件证明，命名时css允许用空格
    

    
        
        
        
    
    
        
玻璃之情
        
从前我会使你快乐
        现在却最多叫你寂寞
        
 再吻下去像皱纸轻薄
        
撕开了都不觉
        
我这苦心已有预备
        
随时有块玻璃破碎堕地
        
勉强下去我会憎你
        
只差那一口气
        
不信眼泪能令失落的你爱下去
        
难收的覆水将感情漫漫荡开去
        
如果你太累及时地道别没有罪
        
牵手来空手去就去
        span没有width
        span没有height
        超链接去下划线
        

        I love you forever.

        这句英语加粗是因为font-family中给英文赋字体时有black黑体
        

        em相对于父元素，rem相对于根元素
        

        
总结文字属性：
        
颜色就三个：color，background，border-color
        
首行缩进是text-indent:2em
        
下划线是text-decoration:none/underline/overline/line-through
        
文本对齐是text-align:left/center/right，是指文字在方框内部靠左还是靠右
        
文本竖直方向对齐用行高line-height使与块高height相等即可
        
多块之间对齐则使用共同属性vertical-align:middle
    

    
        
        
        
    
    
        
总结：超链接就记住四个伪类:水平距离，垂直距离，模糊半径，颜色
    

    
        
        
        
    
    
        

            

                
aaa
                
bbb
                
ccc
                
ddd
                
eee
            
        
        

        总结：列表样式就记住实心空心方形就完了
    

    
        
        
        
    
    
    

    

    

    

    

    总结：背景插图与渐变
    

    
        
        
        
    
    
        

            
login
            

                
username
                
                
password
                
                
email
                
            
        
        
总结：盒子模型懂得设->外/边/内/宽/高五项即可
        
其中，外/边/内在初始化时全为0，需要改再自设，但宽高必须自设
        
注意：全标签初始化margin/border/padding/text-decoration
        
display: block;
        
margin: 0 0 0 0;
        
border: 1px solid/dashed red;或直接一个0
        
padding: 0 0 0 0;
        
height: xpx;
        
width: ypx;
    

    
        
        
        
    
    
        

        

        
        
总结：
        
border-radius四个值：左上，右上，右下，左下
        
box-shadow四个值：X偏，Y偏，模糊，颜色
    

    
        
        
        
    
    
        

            
div
span
            注意上面两个元素分行写会有间隔！
        
        

        

            插入第一行！
            插入第二行！
            插入第三行！
            插入第四行！
            
5
            插入第五行！
            
6
            插入第六行！
            
7
            插入第七行！
            
8
            插入第八行！
            
9
            插入第九行！
            
10
            插入第十行！
            
11
            插入第十一行！
            
12
            插入第十二行！
            可以看到top浮的块与文字纯粹是看谁先谁后
            然后左浮和右浮的块看不出与文字的关系
            如果要文字环绕块的效果，建议只浮一个块
        
        

        

            
下面测试文字环绕效果！
            提到文章，很多人都会想到他与马伊琍的婚姻，马伊琍在经营婚姻方面确实很好，她在婚后愿意在家相夫教子，这确实是非常难得的。而文章与姚笛的事情却让两人的幸福生活陷入了万丈深渊，马伊琍最终也选择与文章离婚。
            
7
            姚笛如今过得相当低调。之前姚笛的前景还是很好的，不过她与文章的事情曝光后，两人的人设都彻底崩塌了，很多网友都唾骂他们。
            前两年姚笛在36岁生日时晒出了钻戒，并表示自己被求婚成功，后来她的求婚戒指也变成了结婚戒指。马伊琍与文章离婚之后，她就被网友们推上了热搜，即使她当时已经有了新恋情，不过网友们还是不买账，而且还疯狂炮轰她，大家都觉得有很大的责任出自她的身上。
            
7
            之后姚笛就出来表示文章和马伊琍当时的关系原本就不好，而且他们也准备离婚了。姚笛还透露起初是文章主动找自己的，而且文章还向姚笛哭诉自己在婚姻方面过得不开心，当时文章还追求她，她拒绝了很多次文章还是没有放弃，然后才感动了她。
            
7
            要是真的是这样的话，当时姚笛也是受害者，她的意思就是文章之前欺骗了她，她并没有破坏别人的感情，姚笛只是追求自己喜欢的人而已。最终婚姻的失败并不全是姚笛的问题，一个丈夫在自己的妻子怀二胎时出轨，男方为什么会做出这样的行为才是最应该关注的！对此，你有什么看法呢？欢迎在评论区留言！
            
经测试，浮动块会与他之后的文字同一行！
            
而在浮动块上面的文字一定会在块的上面！
        
        

            
            
121212121212121221
            
            
121212121212121221
        
        

            
            
121212121212121221
            
            
121212121212121221
        

        
总结display
        
inline是行内元素，没有width与weight，不要使用！
        
block是块元素，有width与weight，但是独占一行！
        
inline-block是行内块元素，有width与weight且不独占一行！
        
注意div默认是block，span默认是inline，这是两者唯一区别！
        
总结float
        
left就是靠左浮，right就是靠右浮，top就是靠上浮（c9居中是因为div设了margin:0 auto）
        
注意一：不同浮动方向互不干涉
        
注意二：会跳出标准模块流（所以父类元素才会塌陷）
        
注意三：浮动后就不管你是block还是inline的了（非标准模板流）
        
总结clear
        
left就是左边没浮动块，right就是右边无浮动块，both就是左右无浮动块
        
总之就是清除本块浮动效果，即换行，但是下一行仍有浮动
        
总结::after或:after
        
照抄即可，防止伪类防止父元素塌陷
        
总结：overflow
        
要么隐藏，要么滚动条
    

    
        
        
        
    
    
        

            
相对定位上移10像素
            
绝对定位距整个页面右边及上边100像素
            
固定定位
            
这里补一个矩形来看second是不是真的100px
            
这个是撑起页面高度让滚动条出现
        

        

            

                这个绝对定位是相对于父元素的，因为父元素有定位relative
            
        
        
总结：
        
一、F12看每个块的尺寸时，外边距是不算的！
        
二、父亲的内边距与儿子的外边距不共享，但兄弟间的外边距共享！
        
三、相对定位仍属于标准模板流，因为父元素没有塌陷，或者说相对定位的元素的原位置被保留了
        
四、绝对定位不属于标准模板流
        
…………如果父对象有设置元素定位relative，由相对于父对象的上下左右距离而定（子绝父相）
        
…………但如果父对象没有设置定位，则相对于整个页面来定，此时建议在BODY中单独放以免逻辑混乱
        
五、固定定位不属于标准模板流，由相对于当前窗口上下左右距离而定
        
六、z-index就是图层显示优先级
    

    
        
        
        
    
    
        

            

            
这是文字
            

            
跟c1图片比
        
        
总结：就是不同元素重叠时谁显示在前谁显示在后就有z-index
        
注意：一定要设置了position之后才可以使用z-index（所以我决定在初始化处加入z-index）
        
总结：透明度属性opacity，范围0到1
    

    
    
    



    我是父元素div
    

        我是子元素p
        我是孙元素span
    



如果显示的方块由边框宽1px所以全部块宽高会加2

    
    
    



    我是父元素div
    

        我是子元素p
        我是孙元素span
    


如果显示的方块由边框宽1px所以全部块宽高会加2