CSS高级操作

最新推荐文章于 2023-12-19 23:05:48 发布

我就在这等着你

最新推荐文章于 2023-12-19 23:05:48 发布

阅读量87

点赞数

分类专栏： HTML 文章标签： css html css3

本文链接：https://blog.csdn.net/ZHRshuo/article/details/123117571

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型属性

边框：
border-style 边框样式

1、border-style：solid ：实线边框
2、border-style：dotted：点线边框
3、border-style：dashed：虚线边框
4、border-style：double：双实线边框

border-color 边框颜色：

1、border-color: green;
2、border-color: #008000;
3、border-color: rgb(255,0,0);

border-边框粗细

border-width ：1px

上方的样式直接设置多个值可以表示不同的方向

1、/* 所有的 */
2、/*border-color: red;*/
3、/* 上下左右 */
4、/*border-color: red green;*/
5、/* 上左右下 */
6、border-color: red green yellow;
7、/* 顺时针：上右下左 */
8、/*border-color: red green black pink;*/

上方的边框样式，还可以和我们的CSS方向关键词结合，用于对不同方向的边框进行样式设置。

例如：

border-top-style
border-right-style
border-bottom-style
border-left-style
……
另外CSS还给提供了同意的边框设置方式：

/* 可以同时设置颜色、粗细、样式 */
border: 1px solid red;
上方的样式设置如果和方向关键词结合，还可以对某个方向的所有边框样式进行设置。

例如：

border-top：1px solid red；
border-bottom：xxx；
内边距
padding(填充)：他可以调整边框到元素内容的距离

padding-top
padding-right
padding-bottom
padding-left
padding：它可以统一设置不同方向的距离：
/*padding: 50px;*/
/* 上下左右 */
/*padding: 50px 20px;*/
/* 上左右下 */
/*padding: 10px 20px 30px;*/
/* 上右下左 */
padding: 10px 20px 30px 40px;片
外边距
margin：设置元素的外边距，也就是和其他元素之间的距离

margin-top
margin-right
margin-bottom
margin-left
盒子尺寸：
box-sizing：设置盒子模型尺寸计算规则的。

content-box(默认值) ：计算盒子尺寸时，只计算盒子元素内容，不包括内边距和边框。
border-box：计算盒子尺寸时，不止计算盒子元素内容，还包括内边距和边框。(大小一共就那么大，所以到时候会调整元素内容的空间)
标准文档流调整-display
默认情况下，再标准文档中，元素是分为两大类的。

块元素：独占一行，拥有完整的盒子模型设置
行内/内联元素：如果有多个内联，会排在一行，且盒子模型不完整。它的大小要由内容撑开。
实际上之所以出现这种效果，就是因为display属性，块元素默认为block，而内联元素默认为inline。
如果想将块元素和内联元素进行转换，可以通过此属性。
display：
none 隐藏
block 快远远的默认值
inline 内联元素的默认值
inline-block 行内块元素 (但是有不可控的间隙)

DIV的概念
DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。
如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用
是一样的。
DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码
注意：
标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如， <p>aa<div>bb</div>cc</p>的结果是不确定的。
CSS中的块元素和行内元素
块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、<div></div>和<body></body>等元素。
内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> … 块级元素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
块级元素的宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控制的。
内联元素的宽度(width)、高度(height)、内边距(padding-top、padding-bottom)、外边距(margin-top、margin-botom)都是不能改变的

页面布局方法
(1)确定版心：网页的主体内容,在页面中水平居中显示

(2)分析页面中的模块

(3)控制页面中各个模块

基本布局方式有很多
按外观分，有单列布局、两列布局、三列布局等
按实现技术分，有基于自动空白边的布局、浮动布局等
按适应性分，有固定宽度布局、流式布局，弹性布局等
使用CSS布局技术可以完成页面整体布局，实现各种布局样式。
CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵。

CSS的定位机制
(1)普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定)

(2)浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框

(3)绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

浮动属性
(1)浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置

(2)浮动的实现：在元素的CSS中添加float属性

left：向左浮动

           right：向右浮动

           none：不浮动(默认值)
浮动元素不占据空间的意思:以两个div为例，正常是俩都显示出来，占据2空间，加浮动后，div就会叠加显示在一个位置, 此时要想让两个div正常显示一般使用到margin-left：浮动div的宽度,或者也是使用浮动。如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖, 如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。如果指定宽度则去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。

常见的浮动布局
(1)一列固定宽度并自动居中：当设置一个盒模型的margin:auto;时，可以让这个盒模型居中。

(2)一列自适应宽度：自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比,当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。

(3)两列自动居中：两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div 之外再加一个父div 。

(4)三列自适应宽度:一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。

清除浮动
当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear来清除.如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性

clear : none | left |right | both
添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果

left：清除左侧的浮动影响

right：清除右侧的浮动影响

both：清除左右两侧的浮动影响
定位属性
(1)相对定位：相对于元素在普通文本流中的初始位置

如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动。

position: relative; /*相对定位*/

top:150px;

left: 150px;
(2)绝对定位：可以把元素精确定位到页面中的某个地方。

绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样
绝对定位的元素的位置是相对于最近的父元素而言的
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index 来控制它层级次序。z-index 的值越高，它显示的越在上层。

position: absolute;
           top:30px;
           left: 45px;
           z-index: -1;
特别注意：
（1）只有父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角。

（2）相对定位和绝对定位需要配合top、right、bottom、left 使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

在页面布局中常用的CSS属性
（1）Visibility－设置对象是否可见。

定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达到动态的效果。

默认值是visible，不显示则设定成hidden。
（2）display：元素的显示方式。

none：不显示。

block：块状显示。

inline：显示在一行。

visibility: hidden; 隐藏元素后，保留元素所占有的物理空间。

display: none;隐藏元素后，不保留元素所占有的物理空间。

auto：默认值。
　　number：无单位的整数值，可为负数。
　　 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。