zoukankan      html  css  js  c++  java
  • 边框 css盒子模型 浮动

    边框属性

     1     <style>
     2         div{
     3             border-style: solid;
     4             border-color: red;     边框颜色
     5             border-width: 5px;
     6             width: 200px;
     7             height: 200px;
     8             border: 10px solid chartreuse;      简写方式
     9             border-top-style: solid;
    10             border-right-style: solid;
    11             border-bottom-style: dashed;
    12             border-color: red;
    13 
    14         }
    15     </style>

          none   无边框

      dotted     点状虚线边框

       dashed     矩形虚线边框

        solid    实线边框

    控制圆角

           border-radius: 50%;

    display  属性

     1         div{
     2             width: 100px;
     3             height: 100px;
     4             border: 1px solid red;
     5             /*display: inline;  !* 将标签设置为内敛标签 *!*/
     6             /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
     7             /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/
     8 
     9         }
    10         span{
    11             border: 2px solid blue;
    12 
    13         }
    14 
    15         .c1{
    16             width: 200px;
    17             height: 200px;
    18             /*display: inline-block;*/  
    19             display: block; /* 将内敛标签设置为块级标签 */
    20         }
    21         
    22      值               意义
    23      display:"none"    HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
    24      display:"block"    默认占满整个页面宽度,如果设置了指定宽度 也没有用,则会用 margin填充剩下的部分。
    25      display:"inline"    按行内元素显示,此时再设置元素的width、height、margin-top、margin-  bottom和float属性都不会有什么影响。
    26      display:"inline-block"    使元素同时具有行内元素和块级元素的特点 可以设置宽高且不独占一行 。   
    27     
    28     
    29 隐藏标签
    30     visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
    31     /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

    css盒子模型

    content  内容区域,自己设置

    padding内边框,内容与边框距离

    border  边框宽度   线粗

     1 content内容区域 自己设置的  
     2 padding 内边距 内容与边框距离 可以自己设置(设置后会在总体会变大) 如果不设置默认?
     3 border 边框宽度  线粗
     4 margin 外边距 你和别的标签距离
     5     div{
     6             width: 200px;
     7             height: 100px;
     8             border: 2px solid deeppink;
     9             /*padding-top: 10px;*/
    10             /*padding-left: 5px;*/
    11             /*padding-right: 2px;*/
    12             /*padding-bottom: 4px;*/
    13             /*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
    14             /*padding: 10px 20px 5px 2px;  !* 10px上下内边距 ,20px左右内边距 *!*/
    15             padding: 10px 20px 5px 0;  /* 10px上下内边距 ,20px左右内边距 */
    16             
    17         }

    margin外边框

     1 margin 外边距
     2 top距离上面标签的距离
     3 bottom距离下面标签的距离
     4 left 距离左边标签的距离
     5 rigth 距离右边标签的距离
     6 
     7         .d1 {
     8             width: 200px;
     9             height: 100px;
    10             border: 2px solid deeppink;
    11             margin-bottom: 200px;  
    12         }
    13         .d2{
    14             margin-top: 100px;  
    15             border: 2px solid blue;
    16 
    17         }
    18 
    19     两个简写的方式
    20     /*margin: 10px 20px;*/
    21     margin: 10px 5px 6px 3px;
    22 
    23     两个情况:
    24         垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
    25         水平方法,两个标签都设这外边距,取两者的边距之和

    float  浮动

     1 浮动会造成父级标签塌陷问题
     2 解决方法:
     3     1 父级标签设置高度
     4     2 伪元素选择器清除浮动,给父级标签加上下面这个类值
     5         .clearfix:after{
     6             content: '';
     7             display: block;
     8             clear: both;  清除浮动clear
     9         }
    10         
    11 clear的值和描述        
    12     值    描述
    13     left    在左侧不允许浮动元素。
    14     right    在右侧不允许浮动元素。
    15     both    在左右两侧均不允许浮动元素。

     overflow

     1 .c1{
     2             width: 200px;
     3             height: 200px;
     4             border: 1px solid red;
     5             /*overflow: hidden;*/
     6             overflow: auto;  
     7         }
     8     <div class="c1">
     9         总结一下:为什么要有浮动啊,是想做页面布局,但是浮动有副作用,父级标签塌陷,所以要想办法去掉这个副作用,使用了clear来清除浮动带来的副作用,我们当然也可以通过设置标签为inline-block来实现这种布局效果,但是把一个块级标签变成一个类似内敛标签的感觉,不好操控,容易混乱,所以一般都用浮动来进行布局。
    10     </div>
    11 
    12 值    描述
    13 visible    默认值。内容不会被修剪,会呈现在元素框之外。
    14 hidden    内容会被修剪,并且其余内容是不可见的。
    15 scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    圆形头像

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4   <meta charset="UTF-8">
     5   <meta http-equiv="x-ua-compatible" content="IE=edge">
     6   <meta name="viewport" content="width=device-width, initial-scale=1">
     7   <title>圆形的头像示例</title>
     8   <style>
     9 
    10     .header-img {
    11       width: 150px;
    12       height: 150px;
    13       border: 3px solid white;
    14       border-radius: 50%;
    15       overflow: hidden;
    16     }
    17     
    18     .header-img>img {
    19         width: 100%;  #让img标签按照外层div标签的宽度来显示
    20 
    21     }
    22   </style>
    23 </head>
    24 <body>
    25 
    26 <div class="header-img">
    27   <img src="meinv.png" alt="">
    28 </div>
    29 
    30 </body>
    31 </html>

    总结一点:width宽度设置的时候,直接可以写100px,30%这种百分比的写法,他的宽度按照父级标签的宽度的百分比来计算

  • 相关阅读:
    Delphi XE5 android 蓝牙通讯传输
    Delphi XE5 android toast
    Delphi XE5 android openurl(转)
    Delphi XE5 如何设计并使用FireMonkeyStyle(转)
    Delphi XE5 android 捕获几个事件
    Delphi XE5 android listview
    Delphi XE5 android 黑屏的临时解决办法
    Delphi XE5 android popumenu
    Delphi XE5 android 获取网络状态
    Delphi XE5 android 获取电池电量
  • 原文地址:https://www.cnblogs.com/ch2020/p/12953575.html
Copyright © 2011-2022 走看看