第四章 元素类型与样式初始化

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qsky001/article/details/80690231
/**CSS样式初始化**/
        body,p,ul,h1,ol,dl,dd{/*通配符,选择页面中所有存在的元素,设置样式*/
            margin:0;
            /* padding:0; */
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
有几种盒子
页面的元素基本分盒子和文本
块级元素:我们的盒子的本质就是块级元素
行内元素:我们的单个字的本质是行内元素

2、元素常见类型:display:inline/*行内元素*/;block/*块级元素*/inline-block行内快元素;
行内元素特性:
    a/b/i/em/img/lable/span
    1、和其他行内元素处于同一行
    2、不支持宽高,img可以设置宽高行内元素
    3、上下外边距无效,左右外边距有效,auto无效
    4、内边距只对内联元素产生影响,无视块级元素
    5、标签之间的空格解析
    6、a标签能包裹块级元素(特殊,区域链接)

block块级元素特性:
    div/p/dl/form/h1-h6/ol/ul
    1、独占一行
    2、高度由里面元素撑开6、宽度)
    4、可以设置外边距/内边距
    5、可以包裹其他任意元素
    6、p标签不可包裹块级元素(特殊,只存放文本)
inline-block行内块元素(行内一样的块元素):
img/input/button
    1、本质上是行内元素,具有行内元素的性质
    2、支持宽高
    3、上下外边距有效,auto无效
    4、内边距只对内联元素产生影响,无视块元素
    5、标签之间的空格解析
    6、img标签不是行内块元素(是行内元素,但可以设置宽高)
解决空格原因解决方案
1、给行内元素父级设置字体大小为0,行内块元素字体大小重新设置
2、删除标签空格

display:none:隐藏对象,不显示
特点:
1、不占据空间,无法点击交互
2、内部子元素也不会显示
3、会产生页面回流与重绘
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页