美文网首页
2019-04-03 回顾复习、关于边框、内边框、外边框、外边距

2019-04-03 回顾复习、关于边框、内边框、外边框、外边距

作者: 北街九条狗 | 来源:发表于2019-04-03 16:24 被阅读0次

回顾复习

标签
                块元素 :默认独占一行,内容撑开高度,支持宽高
                    h1-h6
                    p
                    div
                    ul
                    ol
                    li
                内联元素(行内元素,行级元素):不独占一行,内容撑开宽高,不支持宽高
                    strong em/i
                    span
                    a
            CSS
                行间(内)样式<div id="box" style=""></div>
                内部样式 <head><style></style></head>
                外部样式 <link rel="stylesheet" href="css/test.css">
            基础选择器
                标签选择器   div{}
                类选择器        .box{}
                id选择器       #box{}
            扩展选择器   
                并集选择器   div,#box,.fontred{}
                后代选择器   div .fontred{}
                交集选择器   p.fontred{}
                属性选择器   [test=abc]{}
            文字样式
                font-size:20px;
                font-weight:bold;
                font-family:"宋体";
                font-style:italic;
            文本样式
                color:red|#fc3|rgb(r,g,b)
                text-indent:2em;
                text-align:left right center;
                text-decoration:underline/none;
                line-height:30px;
            列表样式
                ul,ol
                list-style:none; 去掉列表样式
            伪类
                hover 鼠标悬停
                元素:hover{}
                               设置变化时间
                                transition:1s;
            边框
                border:1px solid red;

关于边框

      <style >
            #box1{
                width: 100px;
                height: 100px;
                border: 1px solid #0000FF;
                /* 圆角半径 */
                border-radius: 20px;/*边角弧度  有一个数据管一个角,四个数据管4个角*/
                /* 阴影 :x y z color*/
                box-shadow: 5px 5px 10px red;
                
            }
            #box2{
                width: 100px;
                height: 100px;
                border-bottom: 1px solid #0000FF;
                border-right:2px dashed #090CFF ;
                border-top:2px dashed #000000 ;
            }
            
            
        </style>
        
        
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>

内边框

             padding: 10px; 四周边框都是10px
             padding: 10px 20px; 第一个管上下,第二个管左右
             padding: 10px 20px 30px; 第一个管上,第二个管左右,第三个管下
             padding: 10px 20px 30px 40px; 第一个管上,第二个管右,第三个管下,第三个管右

外边框

/* 内边距 */
padding: 10px;
/* 外边距 */
margin: 10px;

外边距自动水平居中

        <style >
            #box{
                width: 500px;
                height: 20px;
                border: 1px solid red;
                text-align: center;
                margin: 50px auto;
            }
            #box2{
                width: 960px;
                height: 500px;
                border: 1px solid red;
                margin: 0px auto;
            }
            #box3{
                width: 360px;
                height: 50px;
                border: 1px solid red;
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
        
            margin 可以方便让元素在父级元素水平居中
        
         <div id="box">java2</div>
         <div id="box2">
             <div id="box3">
                2
             </div>
         </div>
    </body>

外边距的叠压问题

        <style>
            span{
                margin: 0 10px;
            }
            div{
                width: 100px;
                height: 100px;
                border:1px solid red;
            }
            #box1{
                margin-bottom:30px ;
            }
            #box2{
                margin-top:10px ;
            }
        </style>
    </head>
    <body>
        <!-- margin的x轴方向不存在叠压问题 -->
        <span>东软</span><span>睿道</span>
        <!-- margin的y轴方向存在叠压问题 -->
        <div id="box1"></div>
        <div id="box2"></div>
    </body>

外边距的传递问题

        <style>
            body{
                margin:0;
            }
            #box{
                background: red;
                /* padding:10px; */
                /* border:1px solid red; */
                padding-top:10px;
                padding-bottom: 10px;
            }
            #div1{
                height: 100px;
                background: yellow;
                margin: 0 10px;
            }
            #div2{
                height: 100px;
                background: green;
                margin:0 10px;
                margin-top:10px;
            }
        </style>
    </head>
    <body>
        <!-- 
            嵌套结构中margin-top margin-bottom中存在传递问题
         -->
        <!-- <div style="height: 100px;background: #0000FF;"></div> -->
        <div id="box">
            <div id="div1"></div>
            <div id="div2"></div>
        </div>
        <div style="height: 100px;background: #0000FF;"></div>
    </body>

相关文章

  • 2019-04-03 回顾复习、关于边框、内边框、外边框、外边距

    回顾复习 关于边框 内边框 外边框 外边距自动水平居中 外边距的叠压问题 外边距的传递问题

  • 盒模型

    内容区 内边距 边框 指定边框圆角 边框风格 外边距

  • 盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边...

  • ReactNative布局

    盒子模型 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) ...

  • 盒子模型

    元素的构成: Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距...

  • CSS盒模型

    盒模型从外到里为:外边距margin,边框border,内边距padding,内容。 1.外边距margin,边框...

  • 关于知识点

    一、盒子模型 CSS盒子模型由外到内由:margin(外边距)、border(边框)、padding(内边距)、c...

  • 2018-08-28

    盒子模型 宽高:元素的宽高 外边距:距相邻元素或上级元素的距离 边框:元素的边框 内边距:内容距元素边框的距离 粘...

  • CSS border outline

    边框和轮廓 边框和轮廓是位于外边距内外的线框,有时候,设置边框和轮廓属性对于网页布局很有用,尤其是边框。 边框bo...

  • CSS基础

    一.CSS语法 二.选择器 三. 尺寸,背景,文本,字体,鼠标样式 四. 表格,边框,内外边距,边框模型 边框样式...

网友评论

      本文标题:2019-04-03 回顾复习、关于边框、内边框、外边框、外边距

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