zoukankan      html  css  js  c++  java
  • css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内)
    内边距属性:
    padding          设置所有边距
    padding-bottom     底边距
    padding-left          左边距
    padding-right          右边距
    padding-top          上边距
     
    2.边框
    border-style   定义边框样式
    单边框样式
    border-top-style
    border-left-style
    border-right-style
    border-bottom-style
     
    border-top-width
    border-left-width
    border-right-width
    border-bottom-width
     
    边框颜色
    border-color
     
    css3边框
    border-radius:    圆角边框
    box-shadow:     边框阴影
    border-image:     边框图片
     
    3.外边距
    围绕在内容边框的区域就是外边距,外边距默认为透明区域
    外边距接受任何长度单位,百分数值
    margin     设置所有边距
    margin-bottom     设置底边距
    margin-left          设置左边距
    margin-right          设置右边距
    margin-top          设置上边距
     
    外边距合并
    当另个盒子合并在一起的时候,他们的边距会合并,(遵循多的一部分)
     
    css3盒子相关样式
    1.盒子的类型
    inline       block     inline-block     inline-table(让别个变成行内元素)     list-item(变成列表形式的展现)
     
    <style>
         div{
              display:list-item;
              list-style-type:circle;
              margin-left:30px;
         }
    </style>
    <body>
         <div>实例1</div>
         <div>实例2</div>
         <div>实例3</div>
         <div>实例4</div>
    </body>
    内联元素无法设置宽度和高度,希望设置它的高度,宽度,又希望按照内联样式显示,所以使用inline-block
     
    2.对盒子中容纳不下的内容的显示
    overflow : hidden(隐藏)     scroll(滚动)     auto(水平或垂直添加滚动条)     visible(直接超出显示)
    overflow-x : hidden    scroll  ;
    overflow-y : hidden    scroll  ;
     
    white-space : nowrap ;(字体不允许换行)
     
    3.盒子的阴影和大小计算方式
    box-shadow : 10px 10px 5px #ccc ;
     
    盒子大小根据盒子的box-sizing:(border-box , content-box , inherit)来决定
    content-box  表示整个区域的宽度和高度不被包含在盒子的区域当中
    border-box  表示整个盒子是包含你设置的边距的,边距指内边距和外边距
  • 相关阅读:
    HDU 6071
    HDU 6073
    HDU 2124 Repair the Wall(贪心)
    HDU 2037 今年暑假不AC(贪心)
    HDU 1257 最少拦截系统(贪心)
    HDU 1789 Doing Homework again(贪心)
    HDU 1009 FatMouse' Trade(贪心)
    HDU 2216 Game III(BFS)
    HDU 1509 Windows Message Queue(队列)
    HDU 1081 To The Max(动态规划)
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6494714.html
Copyright © 2011-2022 走看看