对css的一些简单整理

最新推荐文章于 2024-09-16 23:33:40 发布

wufu_

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量262

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/wufu_/article/details/121355820

版权

1、首先是书写样式，一共分为三种：

（1）、行内样式：直接在标签中加入style

<div style="">............</div>

优点：精准；缺点：代码赘余，工作量大

（2）、内联样式在<head>中插入

<style>.........</style>

（3）、外部引入样式：在<head>中插入<link>将外部的css文件链接进来

<link type="text/css" helf="路径">

可以将大量的样式代码另存为一个文件，由不同的网页来链接使用。

优先级：行内样式>内联样式>外部引入样式

2、div盒模型

（1）、外边距：margin，指盒子与外部的距离，书写方式如下：

margin-left:2px;    /**左外边距为2px**/
margin-right:2px;   /**右外边距为2px**/
margin-top:2px;     /**上外边距为2px**/
margin-bottom:2px;  /**下外边距为2px**/
margin:5px;         /**上下左右的外边距都为5px**/
margin:2px 5px;     /**上下外边距为2px，左右外边距为5px**/
margin:2px 3px 4px 5px;/**上外边距为2px，右外边距为3px，下外边距为4px，左外边距为5px**/

（2）、内边距：broder，指内容与盒子边框的距离，书写方式如下：

padding-left:2px;    /**左内边距为2px**/
padding-right:2px;   /**右内边距为2px**/
padding-top:2px;     /**上内边距为2px**/
padding-bottom:2px;  /**下内边距为2px**/
padding:5px;         /**上下左右的内边距都为5px**/
padding:2px 5px;     /**上下内边距为2px，左右内边距为5px**/
padding:2px 3px 4px 5px;/**上内边距为2px，右内边距为3px，下内边距为4px，左内边距为5px**/

（3）、边框：border

可以直接用border：统一设置四条边框，也可以用border-left: border-right: border-top: border-bottom: 分别来设置左右上下的边框。例如：