首页 > 代码库 > CSS 盒模型

CSS 盒模型

2024-09-15 16:24:00   215人阅读

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

在css、html中的标签元素大体分为三种不同的类型：块状元素、行内元素、和行内块状元素。

       常用的块状元素有（block）：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

       常用的行内元素有（inline）：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

       常用的行内块状元素有：<img>、<input>

特征：

块级元素 block：独占一行，可以任意设置宽高

行内元素 inline：宽高不可转换 

行内块级元素 inline-block:同时具备块级和行内元素的特点

  • 改变无序列表
    /*序列去小圆点*/
    list-style: none;  //去掉小圆点
    list-style: upper-roman;    //在序列前增加罗马数字 
    list-style:lower-roman;     //在序列前英文罗马小写
    list-style: upper-alpha;    //英文大写A.B.C序列
  • CSS盒子边框

     盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

    /*盒子边框样式*/
    border-top: 2px solid red;    //实线
    border-right: 2px dashed yellow;   //虚线
    border-left: 2px dotted blue;    //点线
    border-bottom: 4px double green;  //双实线
}

      border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。

  • 添加渐变元素    linear-gradient 线性倾斜（渐变色）

     在HTML中定义一个<div closs="box”>，通过内联或者外联的方式赋予其样式

  1.   制作一个背景为红色的圆：  border-radius
      
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    /*圆*/
    border-radius: 100px;  //半径=直径的一半的圆形,其他圆形，可以更改属性值

技术分享

     2.给盒模型元素添加阴影   box-shadow

.box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*盒模型元素阴影*/
            /* X Y 模糊 外延 颜色 */
            box-shadow:9px 5px 5px #000;
        }

技术分享

      3.线性渐变色  ：颜色从上往下和从左往右   两种方式渐变

 .box{
            width: 200px;
            height: 200px;/*线性渐变色，从上往下*/
            background: linear-gradient(red,yellow); //linear-gradient线性倾斜
        }

技术分享

/*从左到右渐变 to right*/
            background: linear-gradient(to right,red,yellow);

技术分享

   /*颜色位置转变,90deg是黄变红，-90deg是红变黄*/
    background: linear-gradient(-90deg,green,red);

技术分享

     4.径向渐变（从中间扩散至周围）   background: radial-gradient

background: radial-gradient(red 10px,yellow 15px);

技术分享

 

今晚先到这里吧，后续再更新。

 

CSS 盒模型


联系
我们