CSS运用盒子模型划分网页模块

2022-02-28 19:34:01 阅读：122 来源： 互联网

标签：... style 网页模块 color solid background border CSS

1.<div>标签

实现网页的规划和布局

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>div 标签</title>
    <style type="text/css">
        .one{
            width: 600px;
            height: 50;
            background: deeppink;
            font-size: 20px;   /*字体大小*/
            font-weight: bold; /*字体加粗*/
            text-align: center;/*水平居中*/
        }
        .two{
            width: 600px;
            background: linen;
            font-size: 14px;
            text-indent: 2em;/*设置首行缩进2字符*/
        }
    </style>
</head>
<body>
    <div class="one">
        国风...
    </div>
    <div class="two">
        <p>相鼠有皮，人而无仪！人而无仪，不死何为？</p>
        <p>...</p>
    </div>
</body>
</html>

2.盒子模型相关属性

/边框属性/

1）border-style/边框样式

2）border-width/边框宽度

3）border-color/边框颜色

4）border-radius/水平半径参数

5）border-images/图片路径

p{border-style: dashed solid solid solid;border-radius: 20px 20px 20px 20px;} /* style 上 右 下 左 */
        h1{border-style: dashed solid solid;border-color: aqua #ccc #ccc;}    /* style 上 左右 下*/
                                                                              /* color 上[右，下，左]*/

/内边距属性/

padding-top(right,bottom,left)

/外边距属性/

margin-top(right,bottom,left)

其余属性：

box-shadow : ...

box-sizing : ...

背景属性 : background-color,background-image,background-repeat(背景平铺),background-position(图像位置),background-attachment(背景头像固定),background-size...

3.元素类型与转换

块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素:<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>

strong{
            background-color: blueviolet;
            width: 100px;
            height: 50;
            text-align: center;
        }
em{background-color: blueviolet;}
del{background-color: blueviolet;}

<span>行内元素：常用于定义网页中某些特殊显示的文本,div标签可以内嵌span标签，span标签不能内嵌div（大容器与小容器）

标签：...,style,网页,模块,color,solid,background,border,CSS
来源： https://www.cnblogs.com/shudaixiongbokeyuan/p/15947146.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS运用盒子模型划分网页模块