欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS(Cascading Style Sheet)总结

程序员文章站 2022-04-19 13:22:52
CSS层叠样式表 (Cascading Style Sheet)1.字体设置:有继承性,给父元素设置,子元素可继承。(1)字体倾斜:font-style:normal/italic(2)字体加粗:font-weight:normal/bold/bolder/100/200(3)字体大小:font-size:12px(4)字体类型:font-family(5)字体颜色:color (对于a标签,需选中a标签)(6)复合属性:font:font-style font-weight font-s...

CSS

层叠样式表 (Cascading Style Sheet)

1.字体设置:

有继承性,给父元素设置,子元素可继承。
(1)字体倾斜:font-style:normal/italic
(2)字体加粗:font-weight:normal/bold/bolder/100/200
(3)字体大小:font-size:12px
(4)字体类型:font-family
(5)字体颜色:color (对于a标签,需选中a标签)
(6)复合属性:font:font-style font-weight font-size font-family (font-style font-weight可以不写)    

2.文本设置:

(1)文本修饰线:text-decoration:none(无)/underline(下划线)/line-through(删除线)
(2)首行空格:text-indent:2em(两格)/-999999em(隐藏一个盒子中的文本)
(3)文本对齐方式:text-align:left/center/right
(4)设置行高:line-height:30px(行高30px)

3.CSS层叠性

对于同一个盒子,如果设置了多个样式,哪一个起作用?
(1)自己有样式>继承>默认
(2)行内样式>内部样式=外部样式(就近原则)
(3)ID>CLASS>标签(DIV)
(4)特殊值:谁多听谁

4.盒子模型(六大属性)

(1)width  宽度
(2)height  高度
(3)border  盒子边框
    border是复合属性,没有顺序。
        例 border:1px solid red;
            border-width边框粗细
            border-style边框样式
            border-color边框颜色
    四个方向:
        border-top
        border-bottom
        border-left
        border-right
(4)padding  内边距(补白,内容与边框间的间隙)
    四个方向:
        padding-top: 
        padding-right:
        padding-bottom:
        padding-left:
    padding后面也可以跟一个值,二个值,三个值,四个值:
        一个值:padding:10px  四个方向的padding都是10px
        二个值:padding:10px 20px;   上下是10px  左右是20px
        三个值:padding:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值:padding:10px 20px 30px 40px;   上 右 下 左        
    (1)有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }
    (2)对于行内元素来说,padding在垂直方向上不影响行高,效果上看似是有padding,但是padding不是真正的padding,或者说对于一个女盒子来说,padding在垂直方向上无效。
    (3)对于块级元素来说,上下padding可以撑起男盒子的高度。
(5)margin  外边距(边框以外的间隙)
    四有个方向:
        margin-top 
        margin-right 
        margin-bottom 
        margin-left  
    margin后面也可以跟一个值,二个值,三个值,四个值:
        一个值:margin:10px  四个方向的margin都是10px
        二个值:margin:10px 20px;   上下是10px  左右是20px
        三个值:margin:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值:margin:10px 20px 30px 40px;   上 右 下 左
    (1)有此标签有默认的margin  一刀切  *{ margin:0; padding:0; }
    (2)对于行内元素来说,margin在垂直方向上是无效的 
    (3)margin可以设置auto。 表示尽可以大  div{ margin:0 auto; }
    (4)margin可以设置负值  
    (5)对于块级元素来说,margin有重叠问题(塌陷问题)
        1)兄弟元素之间的重叠问题
            margin塌陷的前提:男标签、垂直方向    
            margin到底是多少:取大原则
        2)父子元素之间的重叠问题
            解决办法:给父元素加padding ,只加一个0px不行或者给父元素加border
(6)background  盒子背景
    background-color:设置盒子的背景颜色  背景颜色可以填充padding  也可以填充border
    background-image:设置盒子的背景图片  img标签也是盒子  也可以给img这个盒子设置背景图片
        一个盒子大小正好和背景图大小一样:正好装进去 
        一个盒子如果大于背景图:默认会在x和y轴都进行平铺 
        一个盒子如果小于背景图:只会显示背景图的一部分,背景图的左上角和盒子的左上角对齐  左上角是指从pddding开始  但是border中也会填充图片图片
    background-repeat: 控制是否平铺
        repeat-x  只平铺x轴
        repeat-y  只平铺y轴
        repeat x和y轴都平铺
        no-repeat x和y轴都不平铺
    background-position:
        一个小盒子中放一个大的背景图,可以使用background-position定位。
        一个大盒子中放一个小的背景图,也可以使用background-position定位。
    background-attachment: 背景随盒子滚动而滚动。

5.布局

(1)流动布局
    最简单、最原始、功能较弱。
        男盒子:独占一行,从最上边开始;
        女盒子:并排显示,一行装不下,自动换行。
(2)浮动布局
    a.目的:使用浮动让块级元素并排显示。
    b.浮动元素的特点:
        1)贴靠性:如果都向同一个方向浮动,这两个浮动的元素会紧紧的贴在一起,如果后面的空间不够贴靠的话,它会自动换行。
        2)包裹性:如果是一个男盒子,在没有设置宽度的情况下,只要它浮动了,那么它的宽度会尽可能小。
        3)一个元素内部所有元素都浮动了,如果父元素在没有设置高度的情况下,它的高度会变成0,即父元素的高度塌陷。
        4)如果一个女盒子浮动了,就可以设置宽度和高度,即女盒子就变成男盒子。
        5)浮动元素都是先向上浮动,浮动了父盒子的边界。body是一个盒子,如果是body,body没有设置高度,也会对body造成影响,body的高度也会塌陷。
    c.清除浮动所造成的的影响:
        1)清除对父元素所造成影响
            A)overflow:hidden  
            B)加高法:对父元素加高度
        2)清除对兄弟元素所造成影响:
            clear: left/right/both(clear:both只能写在第1个受影响的元素上,写在父元素上没有用)
    d.两个浮动的元素的不能重叠到一起,如何可以让两个盒子重叠到一起:
        1)一个盒子浮动,另一个不浮动
        2)定位,定位完全脱离标准文档流

本文地址:https://blog.csdn.net/weixin_45984237/article/details/107258840