Notes css-盒子模型-优快云博客

本文链接：https://blog.youkuaiyun.com/js_qh/article/details/132251898

css-盒子模型

基础样式

样式名	描述
text-align	设置内容位置
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-famliy	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

行高：设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距

盒子模型

边框颜色、粗细、样式

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                    border: solid; /* (solid,double,dashed) */  /* 可以border: solid;  border: solid                  red; border: solid 1px; border: solid red 1px;*/
            /* border-top-style:solid;  */      /* 和下面的设置操作一样 */
            
            border-color: red;                         /* 和下面一样 */
            /* border-top-color: ; 
             ...
             ...
             */
            
            /* border-width:100px; */                     /* 上下左右 */
            /* border-width:100px 50px ; */                   /* 上下  左右 */
            /* border-width:200px 100px 5px ; */                  /* 上   左右    下 */
            /* border-width:200px 150px 100px 50px ; */           /* 上右下左 */
            
            /* 三者设置操作是一样,会一样其他的都会 */
            
        }
    </style>
</head>
<body>
    <div>
        你好
    </div>
</body>
</html>

外边设置

<html>


        <style>
                    *{
                        margin: 0px;
                    }
                    .box{
                        width: 251px;
                        height: 251px;
                        background-color: #D7D7D7;
                        border:1px solid #3a6587;
                        margin-top: 30px;
                        margin-left:60px ;
                        /* margin: 0px auto;居中     让类是box的div块水平剧中*/  
}
                #h2id{
                    margin-top: 20px;
                    margin-left: 500px;
                }
            </style>
        </head>
        <body>
            <h2 id="h2id">会员列表</h2>
            <div class="box">过年好，同学们！！</div>
        </body>

内边设置

略

背景

用于设置元素的背景样式，包括背景色、背景图、大小等，背景样式的设置前提是元素有大小

属性名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置

display属性

display用于改变元素的生成类型，从而增加元素的使用方式

属性名	描述
display:none;	隐藏元素
display:block;	将元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

注意

display属性在隐藏元素时，不占据页面的位置，visibility隐藏后，位置仍然被占据着

浮动

设置浮动

浮动只作用设置浮动元素的下面的元素，占据原来的位置

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {
                float:left;/*right*/
            }
        </style>
    </head>
<body>
         <p>
        <span>This is some text. This is some text. This is some text.</span>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        <img src="../img/朋克风女孩.jpg" width="200px" />
        </p>
</body>

清除浮动

举例

    #id9,#id8{
    /*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（标准的从上往下显示）*/
        clear: left;
         clear: right;
        clear: both;   /*清楚左右浮 */

解决浮动塌陷问题

三种方法

/* 方式一：解决浮动塌陷问题，给父级设置固定高 */

/* 方式二：解决浮动塌陷问题，给父级overflow: hidden */

/* 方式三：在浮动的下面在设置一个div然后直接设置清除浮动 / .divclass{ clear: left; clear: right; clear: both; /清楚左右浮动 */ }`

定位

也分为三种

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行固定定位

注意

相对定位设置相对定位之前的位置，在设置之后该位置仍然被占据

绝对定位设置绝对定位之前的位置，在设置之后该位置就为空，其他元素可以占用

堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

CSS3常见效果

圆角效果

控制盒子的四个角的弧度

语法：border-radius

控制的是元素的四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆

eg:

/* border-radius: 50%; */ border-radius: 0px 30px 30px 0px; 上左、上右、下右、下左

透明效果

透明效果的应用比较广泛，特别是在商城网站中的图片+文字描述

背景透明

背景透明只针对背景颜色进行透明

background-color:rgba(x,x,x,x) 透明度在0~1之间前三个代表红绿蓝颜色鲜艳程度最后一个代表颜色透明度

盒子阴影

/*  
                参数一 X轴偏移量 
                参数二 Y轴偏移量 
                参数三 阴影模糊程度 
                参数四 阴影扩展半径
                参数五 阴影颜色 
                参数六 inset内阴影 
            */
            box-shadow: 3px 3px 9px 100px gray ;