美文网首页
Web8.CSS常见样式

Web8.CSS常见样式

作者: FiredEarthMusic | 来源:发表于2017-10-22 18:46 被阅读9次

    https://necolas.github.io/normalize.css/
    https://meyerweb.com/eric/tools/css/reset/

    width: 100%是什么意思

    设置当前元素的content的宽度等于父容器content的宽度,对块级元素不要随便加width:100%

    块级元素

    block-level
    块级元素可以包含块级元素和行内元素,行内元素只能包含文本和行内元素
    块级元素占据一整行空间,行内元素占据自身宽度空间
    (宽高设置、内外边距的差异)
    宽高只对块级元素设置生效,对行内元素设置无效
    块级元素可以正常设置margin padding

    行内元素 上下margin padding 是不生效的
    只有左右margin padding生效

    常见元素

    div h1 h2 h3 h4 h5 h6  p  hr
    form ul dl ol pre table
    li dd dt tr td th
    

    行内元素(内联)

    inline-level

    常见元素

    em strong span a  br  img
    button input label select textarea
    code script
    

    宽高

    只对块级元素设置生效,对行内元素设置无效

    边框

    三个属性: border-width, border-color, border-style

    .box{
        border-width: 1px;
        border-color: red;
        border-style: solid;  /* dotted  dash*/
        // border-bottom: 1px black dotted;
        // border-bottom: none;
    }
    .box1{
        border: 1px solid #ccc;
    }
    
    <div class="t0"></div>
    .t0{
        height: 20px;
        width: 20px;
        border-top: solid 20px red;
        border-left: solid 20px green;
        border-right: solid 20px orange;
        border-bottom: solid 20px blue;
    }
    t1{
        height: 20px;
        width: 20px;
        border-top: solid 20px red;
        border-left: solid 20px transparent;
        border-right: solid 20px transparent;
        border-bottom: solid 20px blue;
        border-radius: 6px;
        border-radius: 10px 8px 6px 2px //上 右 下 左
        border-radius: 10px;
        border-radius: 50%;
    }
    

    边框

    margin border padding content

    padding代表内边距,有四个方向的值,可以合写,

    值可以是数值也可以是百分比(相对于父容器、不是自身)

    padding-top
    padding-right
    padding-bottom
    padding-left
    padding: 20px //  20px 20px 20px 20px
    padding: 10px 20px 10px 20px  //上右下左
    padding: 10px 20px  //上下10 左右20 简写
    padding: 10px 20px 30px //pading: 10px 20px 30px 20px
    

    margin

    margin代表外边距,有四个方向的值,可以合写,
    值可以是数值也可以是百分比(相对于父容器、不是自身)
    还可以是负值
    外边距合并问题
    margin-top
    margin-right
    margin-bottom
    margin-left

    margin: 0 auto
    对于块级元素 设置margin: 0 auto 可达到居中目的
    .box{
        /* margin: 0 auto;  实际上是下面两个起作用*/
        margin-left: auto;
        margin-right: auto;
    }
    
    *{
        margin: 0;
        padding: 0;
    }
    

    display

    块级:block list-item table
    行内:inline inline-table inline-block

    font

    font-size: 字体大小
    font-family: 字体
    font-weight:字体粗度 常用的是regular 和 bold
    line-height:行高,可以用百分比、倍数或者固定尺寸
    以上属性都可以继承给子元素
    Chrome默认字体大小16px,最小字体12px

    文本

    text-align: 文本对齐方式 left、center、right、justify
    text-indent: 文本第一行缩进距离
    text-decoration: none、underline、line-through、over-line
    color: 文字颜色
    text-transform: 改变文字大小写none、uppercase、lowercase、capitalize
    word-spacing: 可以改变字(单词)之间的标准间隔
    letter-spacing: 字母间隔修改的是字符或字母之间的间隔

    //text-align: 用在块级元素上,对里面的行内元素生效

    浏览器默认样式

    Normalize.css   //https://necolas.github.io/normalize.css/
    CSS Reset   //https://meyerweb.com/eric/tools/css/reset/
    简单去除
    
    *{
        margin: 0;
        padding: 0;
    }
    

    display用于设置元素渲染框的类型

    display 用于设置元素渲染框的类型
    none 不显示元素。
    block 显示为块状元素。
    inline 显示为行内元素。
    inline-block 显示为行内块,创建一个 BFC。
    table-cell 显示行为与 <td> 一样。
    flex flex 布局
    grid grid 布局
    
    
    问题 block,inline,inline-block 元素的区别是什么?
    
    block 元素独占一行,宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素,比较特别的是 <p> 只能包含 inline 元素。
    
    inline 元素不换行,宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效, 垂直方向的 padding(padding-top, padding-bottom),margin(margin-top, margin-bottom) 无效。
    
    inline-block 元素不换行,设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC,因此可以包含浮动。
    
    //行内元素居中
    <style>
        .box{
            text-align: center;
        }
    </style>
    <div class="box">
        ![](https://img.haomeiwen.com/i1319947/e6ff906ce2c3efbc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </div>
    
    //单行文本溢出...
    .card > h3{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    <div class="card">
        ![](https://img.haomeiwen.com/i1319947/79a3fc5cf5eb7f86.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <h3><a href="#">这是标题这是标题这是标题这是标题</a></h3>
        <p>这是介绍这是介绍这是介绍这是介绍</p>
    </div>
    
    .card{
        width: 200px;
        border: 1px solid #ccc;
        font-size: 12px;
        margin: 0 auto;
    }
    .card>img{
        width: 200px;
    }
    .card>h3{
        padding: 0 10px;
        white-space: nowrap;  //不折行
        overflow: hidden;        //溢出之后隐藏
        text-overflow: ellipsis;
    }
    .card>h3>a{
        text-decoration: none;
        color: #f333
    }
    .card>p{
        padding: 0 10px;
        color: #666;
     }
    ```
    
    
    ##1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别
    
    
    ##2.什么是 CSS 继承? 哪些属性能继承,哪些不能?
    
    
    ##3.如何让块级元素水平居中?如何让行内元素水平居中?
    
    
    ##4.用 CSS 实现一个三角形
    
    
    ##5.单行文本溢出加 ...如何实现?
    
    
    ##6.px, em, rem 有什么区别
    
    
    ##7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?1

    相关文章

      网友评论

          本文标题:Web8.CSS常见样式

          本文链接:https://www.haomeiwen.com/subject/lciyuxtx.html