HTML与CSS学习笔记(2)

1、CSS背景样式？

background-color 背景色

background-image 背景图

url（背景地址）

默认：会水平垂直铺满背景图

background-repeat 平铺方式

repeat-x x轴平铺

repeat-y y轴平铺

repeat（x和y都进行平铺，默认值）

no-repeat 都不平铺

background-position 背景位置

x y 如果为正数：图片就会往右和下进行偏移；如果为负数：图片往左和上进行偏移

还可以用单词：

x：left、center、right

y：top、center、bottom

还可以是百分数。

background-attachment ：背景图随滚动条移动的方式

scroll：默认值，跟着滚动条移动（背景位置是按照当前元素进行偏移的）

fixed：固定，不随浏览器滚动条移动（背景位置是按照浏览器进行偏移的）

2、CSS边框样式？

border-style：边框样式

solid：实线；

dashed：虚线；

dotted：点线；

border-width：边框大小

px

border-color：边框颜色

red、#f00

边框也可以针对某一条边进行单独设置：border-top-style；中间是方向，可以是left、right、top、bottom

颜色：透明颜色 transparent

3、css文字样式？

font-family：字体类型
    英文、中文
    衬线体与非衬线体
    注：
    1、当字体名字中有空格的时候要用单引号引起来
    2、多个字体类型的设置目的
font-size：字体大小
    默认：16px
    写法：number（px）、单词（small、large...不推荐使用）
    注：字体大小一般为偶数
font-weight：字体粗细
    模式：正常（normal）、加粗（bold）
    写法：单词（normal）、数值（100 200....900；100-500都是正常的，600-900都是加粗的）
font-style：字体样式
    模式：正常（normal）、斜体（italic）
    注：oblique也是表示斜体，用的比较少
    区别：1、italic：所有带有倾斜属性的字体的才可以设置
        2、oblique没有倾斜属性的字体也可以设置倾斜操作

4、css段落样式？

text-decoration：文本装饰

下划线:underline

删除线:overline

下划线:line-through

不添加任何样式：none

注：添加多个文本修饰：line-through underline overline（空格隔开）

text-transform：大小写转换，针对英文
    小写：lowercase
    大写：uppercase
    只针对首字母大写：capitalize

text-indent：文本缩进
    针对首行缩进
    em单位：相对单位，1em永远都是跟字体大小相同

text-align:文本对齐方式
    对齐方式：left、right、center、justify（两端点对齐）

line-height：行高
    什么是行高：一行文字的高度
    组成：上边距、字体大小、下边距
    第一行的下边距与第二行的上边距是等价重合的
    默认行高：不是固定的，而是变化的，根据当前字体的大小而不断变化

    取值：1、number（px）|scale（比例值，跟文字大小）

letter-spacing：字之间的间距
word-spacing：词之间的间距：针对英文单词的

英文和数字不自动拆行的问题：
强制拆行:(针对英文)
    1、word-break：break-all（非常强烈的拆行）
    2、word-wrap：break-word（不是那么强烈的拆行,会产生一些空白区域）

5、css复合样式？

复合的写法是通过空格的方式实现的。复合写法有的是不需要关心顺序的，例如background和border，有的需要关心顺序，例如font。
1、background：red url（） repeat 0 0；
2、border：1px red solid；
3、font：
    注：最少要有两个值size和family（要保证顺序）
        weight、style、size、family（这种写法ok）
        style、weight、size、family（也对）
        style、weight、size/line-height、family（也对）
注：如果非要混合这写，要先写符合样式，再写单一样式，这样单一样式才不会被覆盖掉（就近原则）

6、css选择器？

1、ID选择器
    #elem{} id="elem"
    注: 1、id值是唯一值：在一个页面中只能出现一次，出现多次是不符合规范的
        2、命名规范：由字母、下划线、中划线、数字（并且第一个不能是数字）
        3、驼峰写法：searchButtom（小驼峰） searchSmallButtom
           短线写法：search-small-buttom
           下划线写法：search_small_buttom
        4、快捷写法：div#elem按回车或者tab键自动补全：<div id="elem"></div>

2、class选择器
    .elem{} class="elem"
    1、class选择器是可以复用的
    2、可以添加多个class样式
    3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
    4、标签+类的写法:如p.box(要连在一起写)
    5、快捷写法：div.elem按回车或者tab键自动补全：<div class="elem"></div>

3、标签选择器(TAG选择器)
        div{}       <div></div>
        使用的场景：
            1、去掉某些标签的默认样式
            2、复杂的选择器中，如层次选择器

4、群组选择器(分组选择器)
    可以通过逗号的方式，给多个不同的选择器添加同一的CSS样式，来达到代码的复用
    div,#text,.title{background: hotpink;}

5、通配选择器

    *{}->div,h1,h2...{}
    注：尽量不要使用通配选择器，因为会给所有的标签样式，慎用
    使用的场景：
        1、去掉所有标签的默认样式时，

6、层次选择器

    后代 M N{}      M与N空格隔开，M标签中所有的N标签都修饰
    父子 M>N{}      只关注M标签直属下的N标签，不管N标签中嵌套的N标签
    兄弟 M~N{}       选中当前M下面（不是嵌套在里面）的所有兄弟N标签
    相邻 M+N{}      当前M标签下面相邻的第一个N的标签

7、属性选择器

    M[attr]{}
    =：完全匹配
    *=：部分匹配
    ^=：起始匹配
    $=:结束匹配
    [][][]:组合匹配

8、伪类选择器

    M:伪类{}
    ：link      访问前的样式    （只能添加给a标签）
    ：visited   访问后的样式     （只能添加给a标签）
    ：hover     鼠标移入的样式   （可以添加给所有的标签）
    ：active    鼠标按下时的样式    （可以添加给所有的标签）

    注意：1、一般的网站都只设置hover：
            a{} （link、visited、active） a：hover{}
        2、四个属性都写的时候一定要注意顺序：L V H A
        3、link visited只能给a标签加，hover和active可以给所有标签加

    ：after、：before   通过伪类的方式给元素添加一些文本内容,使用content属性
    :before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素:
             #example:before {
                content: "#";
                color: red;
            }

            #example:after {
                content: "$";
                color: red;
            }

    :checked、：disabled、：focus   都是针对表单元素的伪类选择器

    结构性伪类选择器
        nth-of-type()、nth-child()
        角标是从1开始的，1表示第一项，2表示第二项|n值   表示从0到无穷大（可以利用n来进行隔行换色的需求，2n表示偶数，2n+1表示奇数）
        注：3n+1表示3个元素为一组，三个元素中的第一个元素被选中
        first-of-type：
        last-of-type：
        only-of-type：当只有一个元素的时候对该元素修饰

        nth-of-type()、nth-child()区别
            type：类型
            child：孩子

7、css继承

文字相关的样式可以被继承:比如在div标签里面添加font-size和color样式，则div标签里的标签如p标签也会继承这些样式

布局相关的样式不能被继承：（默认是不能继承的，但是可以设置继承属性）比如div标签里面的width等布局样式div里面的标签比如p标签不会继承

8、css优先级

1、当设置相同样式时，后面的优先级较高（就近原则：谁更接近body标签谁更有效），但不建议出现重复设置样式的情况

2、内部样式与外部样式

内部样式与外部样式优先级相同，如果设置了相同样式，那么后写的引入方式优先级高

3、单一样式的优先级：

style行内>id>class>tag>继承

        注：style行间 权重：1000
            id 权重：      100
            class 权重：   10
            tag 权重：     1
    4、!important
        提升样式优先级：非规范方式，不建议使用。(是不能针对继承的属性进行优先级的提升)

    5、标签+类与单类
        标签+类>单类

    6、群组优先级
        (同一权重选择器时)群组选择器与单一选择器的优先级相同，靠后写的优先级高    

    7、层次优先级（尽量只写三层以内，超出三层就不符合规范了）
        1、权重比较
            ul li .box p input{}(这就是一个层次)    权重：1+1+10+1+1=14
            .hello span #elem{}                    权重：10+1+100=111
            所以第二个层次优先级高
            注：1与10与100是等级的意思，并不存在100个1等于一个100的情况

        2、约分比较
             ul li .box p input{}   约分后：li p input{}
            .hello span #elem{}     约分后：#elem{}

9、css盒子模型

组成(由内向外)：content->padding->border->margin
   类比为快递    物品    填充物    包装盒   盒子与盒子之间的间距

   content：内容区域 width和height组成的

   padding：内边距（内填充）
        只写一个值：30px（上下左右）
        写两个值：30px 40px（上下、左右）
        写四个值：30px 40px 20px 10px（上、右、下、左）

    单一样式只能写一个值
        padding-left
        padding-right
        padding-top
        padding-bottom

    margin：外边距（外填充）
        只写一个值：30px（上下左右）
        写两个值：30px 40px（上下、左右）
        写四个值：30px 40px 20px 10px（上、右、下、左）

    单一样式只能写一个值
        margin-left
        margin-right
        margin-top
        margin-bottom

    注：
        1、背景色会填充到margin以内的区域（包括padding、content、border，不包括margin）
        2、文字内容在content区域显示
        3、padding不能为负数，但是margin可以为负数

box-sizing：
    盒尺寸：可以改变盒子模型的展示形态。
    默认值：content-box：width、height->content（仅有content分配width和height）
    border-box：width、height->content、padding、border（三者分配width和height）

    使用的场景：
        1、不用再去计算一些值（比如保持盒模型整体尺寸下加padding、margin等属性）
        在不使用box-sizing的情况下加padding和margin会使盒子变大。
        2、解决一些百分比的问题

盒子模型的一些问题：
    1、margin叠加问题：出现在上下margin同时存在的情况下.回取上下中值较大的作为叠加的值
        解决方案：
            1、BFC规范
            2、想办法只给一个元素添加间距
    2、margin传递问题，出现在嵌套的结构中，只是针对于margin-top,即父元素会随着子元素移动，其他三个方向没有传递问题
        解决方案：
            1、BFC规范
            2、给父容器加边框
            3、margin换成padding

扩展：
    1、margin左右自适应是可以的，但是上下自适应是不行的（有冲突），实现上下自适应之后学习
    2、width、height不设置的时候对盒子模型的影响。会自动去计算容器（不用手动减去padding等值）的大小，节省代码。

10、标签分类？

按类型：
    block：div、p、ul、li、h1.....
        特性：
        1、独占一行
        2、支持所有样式
        3、不写宽的时候跟父元素的宽相同
        4、所占区域是一个矩形

    inline：span、strong、a、em、img..
        1、挨在一起的
        2、有的样式不支持，例如：width、height、margin和padding（某一方向不支持）
        3、不写宽的时候，宽度有内容决定
        4、所占的区域不一定是矩形
        5、内联标签之间有空隙，原因：换行产生的,解决方案看例子（用font-size）

    inline-block：input、select....
        1、挨在一起，但是支持宽高

    注：布局一般用块标签，修饰文本用内连标签

按内容：
    Flow：流内容
    Metadata：元素据
    Sectioning：分区
    Heading：标题
    Phrasing：措辞
    Embedded：嵌入的
    Interactive：互动的
    （详情https://html.spec.whatwg.org/multipage/dom.html）

按显示：
    替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容(比如img要通过具体属性来操作具体显示效果)
        注意img虽然是inline，但也属于替换元素，具有替换元素的特性所以可以设置inline没有的宽高属性
    非替换元素：将内容直接告诉浏览器，将其显示出来（如h1）

11、显示框类型

display:none 不占空间的隐藏

visibility: hidden; 占空间的隐藏

display：block
display：inline-block
display：inline

12、标签嵌套规范

ul、li

dl、dt、dd

table、tr、th、td

块标签可以嵌套内联标签
    <div>
            <p></p>
    </div>

块嵌套块（块标签不一定能嵌套块标签）
    <div>
        <div></div>
    </div>
    特殊：
        p标签不能内嵌块标签

内联标签是不能嵌套块标签的
    <span>
        <div></div>
    </span>
    这是错误的

    特例：
    <a href="#">
        <div></div>
    </a>

13、溢出隐藏

overflow：
    visible：默认
    hidden：隐藏
    scroll：无论内容多少出现滚动条
    auto：内容多时出现滚动条
    x轴、y轴
        overflow-x、overflow-y针对两个轴分别设置

14、透明度与手势

opacity：0（透明：占空间）~1（不透明）

0.5（半透明）

    注：占空间、所有字内容也会透明,rgba属性则不会

rgba():0~1

注：可以让指定的样式透明而不影响其他样式

cursor：手势

default:默认箭头

要实现自定义手势：

准备图片：.cur .ico(格式要求)

cursor: url(../img/bilibili_16px_1188649_easyicon.net.ico),auto;

15、最大、最小宽高

min-width、min-height：>=某个值，该范围内可自由伸缩
max-width、max-height;<=某个值，该范围内可自由伸缩

%单位：换算->以父(与爷爷(body)没关系)容器的大小进行换算的

一个容器怎么适应屏幕的高：容器加height:100%;body:100%;html:100%

    html,body{height:100%；}
    .container{height:100%;}

16、css默认样式

没有默认样式：
    span、div.....

有默认样式：
    body->有margin默认样式
    h1...h6->有上下margin默认样式
    ul li->默认：margin：上、下 16px padding：左 40px
        list-style:disc
    p
    a->text-decoration: underline;

注：有的默认样式便利，有的妨碍计算要清除

17、css reset

简单的css reset方案：
    *{margin：0；padding：0；}
        优点：不用考虑哪些标签有默认的margin和padding
        缺点：这样会稍微地影响性能

    ul{list-style:none;}

    a{text-decoration: none;}

    img{display:block;}
        内联的问题：图片跟容器底部有一定的空隙
            内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
            vertical-align: baseline;基线对齐方式、默认值
            img{vertical-align: bottom;}解决方式是推荐的

    写具体页面的时候或一个布局效果的时候：(一般的设计步骤 重点)
        1、写结构（html）
        2、css重置样式
        3、写具体样式