CSS样式属性、盒子模型、扩展属性的使用

古城微笑少年丶 2023-07-24 02:52 9阅读 0赞

### CSS样式属性、盒子模型、CSS3扩展属性 ###

*   *  1. CSS 样式属性
     *   *   *  1.1 字体 font-xxx
             *  1.2 文本 text-xxx, color...
             *  1.3 背景 background-xxx
             *  1.4 列表 list-style-xxx
             *  1.5 尺寸 width, height, line-height
             *  1.6 显示 display
             *  1.7 轮廓 outline-xxx
             *  1.8 浮动 float, clear
             *  1.9 定位 position, left, right, top, bottom
     *  2. CSS 盒子模型
     *  3. CSS3 扩展属性
     *  4. 源码示例+效果图：注册页面

## 1. CSS 样式属性 ##

#### 1.1 字体 font-xxx ####

定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

*  font 简写属性。作用是把所有针对字体的属性设置在一个声明中。eg：font:oblique 700 30px “黑体”; /\* 样式 加粗 大小 风格 \*/
 *  font-family 设置字体系列。
 *  font-size 设置字体的尺寸。
 *  font-style 设置字体风格。（斜体）
 *  font-weight 设置字体的粗细。

#### 1.2 文本 text-xxx, color… ####

改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

*  color 设置文本颜色
 *  direction 设置文本方向。
 *  line-height 设置行高。
 *  text-align 对齐元素中的文本。（左对齐、居中、右对齐）
 *  text-decoration 向文本添加修饰。（上划线、下划线、删除线、无线条）
 *  text-indent 缩进元素中文本的首行（2em : 2个字符；20% : 20%的宽度）
 *  text-transform 控制元素中的字母。（全大写、全小写、所有单词首字母大写）
 *  unicode-bidi 设置文本方向。
 *  white-space 设置元素中空白的处理方式。（=“nowrap” 禁止文本分行，即都在1行内）
 *  letter-spacing 设置字符间距。
 *  word-spacing 设置单词间距。

#### 1.3 背景 background-xxx ####

*  background-color：设置背景颜色，默认透明
 *  background-image:url(“图片路径”);设置背景图片
 *  background-size: 设置背景图片的尺寸属性
 *  background-repeat:  
    repeat-y:只在垂直方向都平铺  
    repeat-x:只在水平方向都平铺  
    repeat:在水平垂直方向都平铺  
    no-repeat:任何方向都不平铺
 *  background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center(1个位置值或多个组合位置值)  
    /*简写 没有顺序*/
 *  background: red center no-repeat url(img/003.jpg);

#### 1.4 列表 list-style-xxx ####

*  list-style-type:decimal;改变列表的标志类型
 *  list-style-image: url(“images/dog.gif”);用图像表示标志
 *  list-style-position: inside;确定标志出现在列表项内容之外还是内容内部  
    简写
 *  list-style: decimal url(img/001.png) inside;  
    去掉样式:
 *  list-style:none;
 *  list-style-type:none;

#### 1.5 尺寸 width, height, line-height ####

*  width:设置元素的宽度
 *  height:设置元素的高度
 *  line-height:设置元素的行高

#### 1.6 显示 display ####

*  display:  
    none 不显示  
    block 块级显示 默认  
    inline 行级显示  
    inline-block 行级块  
    flex 伸缩布局

#### 1.7 轮廓 outline-xxx ####

轮廓（outline）  
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：

*  outline-style:  
    solid(实线) dotted(虚线) dashed(虚线的每段较长) double(框为空心); 设置轮廓的样式
 *  outline-color:red; 设置轮廓的颜色
 *  outline-width:10px 设置轮廓的宽度

#### 1.8 浮动 float, clear ####

*  float="?"  
    left 左浮动 right 右浮动 none 不浮动 inherit 继承父元素

*  浮动起来的元素会遮盖没有浮动属性的元素

*  clear="?"  
    left 左侧不允许浮动元素  
    right 右侧不允许浮动元素  
    both 左右两侧均不允许浮动元素  
    none 默认，允许浮动元素出现在两侧  
    inherit 继承父元素

#### 1.9 定位 position, left, right, top, bottom ####

*  position:  
    static(默认)  
    relative(相对) 相对自身原来的位置偏移某个距离，原本所占的空间仍然保留。  
    absolute(绝对) 相对于已定位的父元素，如无已定位的父元素则相对于浏览器，不保留原空间。  
    fixed(固定) 固定加载位置，不会因为滚动而变化位置
 *  left - 相对浏览器左边
 *  right - 相对浏览器右边
 *  top - 相对浏览器顶端
 *  bottom - 相对浏览器底端

> 注意：body有默认的margin(`8px`)

## 2. CSS 盒子模型 ##

![CSS 盒子模型][CSS]

1.  边框 `border`

*  border-style:边框样式，值有以下情况：  
    solid:实线  
    double:空心线  
    dashed:虚线组成的边框  
    dotted:圆点组成的边框
 *  border-color:边框颜色
 *  border-width:边框宽度  
    简写
 *  border: 1px solid red;

1.  外边距 `margin`

*  margin:外间距,边框和边框外层元素的距离  
    四个方向的距离(top right bottom left)
 *  margin-top:像素值px;
 *  margin-bottom:像素值px;
 *  margin-left:像素值px;
 *  margin-right:像素值px;

1.  内边距 `padding`

*  padding:内间距,元素内容和边框之间的距离((top right bottom left))
 *  padding-left:像素值px;
 *  padding-right:像素值px;
 *  padding-top:像素值px;
 *  padding-bottom:像素值px;

> 盒子模型的`实际的宽度：width+2*(padding+border+margin)`  
> 盒子模型的`实际的高度：height+2*(padding+border+margin)`

## 3. CSS3 扩展属性 ##

1.  圆角 `border-radius`  
    border-radius:50%; //圆角半径  
    可以将正方形图片切为圆形。
2.  阴影 `xxx-shadow`  
    相对于自身原来的位置偏移x,y像素值 模糊半径值 颜色值  
    box-shadow:10px 10px 5px \#888888; //方框阴影属性  
    text-shadow:5px 5px 5px \#ffff00; //文本阴影属性
3.  背景图片 `background-xxx`  
    <body style=“text-align: center;  
    background:url(img/1.png);  
    background-size: 200px 300px;  
    background-repeat: no-repeat;”>  
    </body> //背景图片尺寸，不平铺  
    background-image:url(bg\_flower.gif),url(bg\_flower\_2.gif); // 多张背景图

## 4. 源码示例+效果图：注册页面 ##

效果截图：  
![注册页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70_pic_center]

css样式代码：

body { 
        margin: 0px;
        background-image: url(../img/bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
    }
    
    #container { 
        width: 60%;
        height: 500px;
        background-color: aliceblue;
        border-radius: 20px;
        margin-left: 20%;
        margin-top: 5%;
        display: flex;
    }
    
    #left, #center, #right { 
        height: 500px;
    }
    
    #left { 
        width: 20%;
        padding-top: 2%;
        padding-left: 3%;
    }
    
    #left font { 
        font-size: 20px;
        color: gray;
    }
    
    #left #f1 { 
        color: orange;
    }
    
    #center { 
        width: 30%;
        padding-left: 10%;
        padding-top: 5%;
    }
    
    #center span { 
        color: #808080;
        font-size: 12px;
    }
    
    #center .item { 
        line-height: 50px;
    }
    
    #center button[type="submit"] { 
        width: 60px;
        height: 30px;
        margin-left: 40px;
        margin-top: 10px;
        background-color: #FFA500;
        color: #3a3a3a;
    }
    
    #center button[type="reset"] { 
        width: 60px;
        height: 30px;
        margin-left: 40px;
        margin-top: 10px;
        color: #3a3a3a;
    }
    
    #copy { 
        display: block;
        margin-top: 60px;
    }
    
    #right { 
        width: 20%;
        padding-left: 15%;
        padding-top: 2%;
    }
    
    #right a { 
        color: indianred;
        text-decoration: none;
    }
    
    #right a:hover { 
        color: red;
    }

html页面源码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS伸缩布局之注册页面</title>
            <link rel="stylesheet" type="text/css" href="./css/register_page.css" />
        </head>
        <body>
            <div id="container">
                <div id="left">
                    <font id="f1">新用户注册</font> <br>
                    <font id="f2">USER REGISTER</font>
                </div>
                <div id="center">
                    <form action="" method="">
                        <div class="item">
                            <span>账号：</span><input type="text" name="" id="" value="" placeholder="请输入账号" /> <br />
                        </div>
                        <div class="item">
                            <span>密码：</span><input type="password" name="" id="" value="" placeholder="请输入密码" /> <br />
                        </div>
                        <div class="item">
                            <span>邮箱：</span><input type="" name="" id="" value="" /> <br />
                        </div>
                        <div class="item">
                            <span>主页：</span><input type="" name="" id="" value="" /> <br />
                        </div>
                        <div class="item">
                            <span>地址：</span><input type="" name="" id="" value="" /> <br />
                        </div>
                        <div class="item">
                            <span>手机：</span><input type="" name="" id="" value="" /> <br />
                        </div>
                        <button type="submit">注册</button>
                        <button type="reset">重置</button> <br />
                    </form>
                    <span id="copy">
                        - BY Jerry - 2020-4-9 00:22:45 © -
                    </span>
                </div>
    
                <div id="right">
                    <font>已有账户？</font>
                    <a href="index.html">立即登录</a>
                </div>
    
            </div>
        </body>
    </html>

[CSS]: /images/20230528/c163ae9860d94537ab640a06e8e7a037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/1b669773023d4672b89a3b8bdbedcc8b.png