01
2020
09

css样式后续;

CSS盒子模型(Box Model)

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容,

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素;

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。blob.png

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。

当在指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大的 元素,你还必须添加内边距,边框和边距。

当需要设计一个只有250像素的空间,则需要总宽度为250px的元素;width: 220px; padding: 10px; border: 5px solid gray;  margin: 0; 总元素宽度=220+10+10+5+5;

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框样式border-style属性用来定义边框的样式

border-style:none;无边框
border-style:dotted;虚线边框
border-style:dashed;虚线边框
border-style:solid;实线边框
border-style:double双边框
border-style:groove;凹槽边框
border-style:ridge垄状边框
border-style:inset嵌入边框
border-style:outset外凸边框
border-style:hidden隐藏边框

边框宽度:border-width 属性为边框指定宽度

为边框指定宽度有两种方法:可以指定长度值,比如 2px,或者使用 3 个关键字之一,它们分别是 thick(粗的) 、medium(默认值) 和 thin(细的) border-width:5px;

边框颜色:border-color属性用于设置边框的颜色;

name - 指定颜色的名称,如 red;可以根据RGB颜色配色表指定 RGB 值, 如 rgb(255,228,196),border-color:rgb(255,228,196);blob.png;根据指定16进制值border-color:#0000FFblob.png还可以设置边框的颜色为"transparent"(透明的)

 border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式;

在CSS中,可以指定不同的侧面不同的边框: border-top-style(顶部); border-right-style(右侧的);border-bottom-style(底部);border-left-style应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值-style(右侧的)border-style:dotted(四面的);

总结:border属性可以样式,宽度,颜色简写;border:5px solid red;

CSS 轮廓(outline);outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,outline属性指定元素轮廓的样式、颜色和宽度

outline-style:dotted;虚线边框
outline-style:dashed;虚线边框
outline-style:solid;实线边框
{outline-style:double双边框
outline-style:groove凹槽边框
outline-style:ridge垄状边框
outline-style:inset嵌入边框
{outline-style:outset外凸边框
border-style:hidden隐藏边框

CSS outline-color 属性;设置一个虚线轮廓的颜色   outline-color:#00ff00;css outline-width属性:设置轮廓的宽度, outline-width:5px属性也可以定义:outline-width:thin(规定细轮廓),outline-width:medium默认。规定中等的轮廓),outline-width:thick(规定粗的轮廓),也可以自己定义大小px

CSS margin(外边距):margin(外边距)属性定义元素周围的空间;

margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的,可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性;margin-top:100px;(上边距)  margin-bottom:100px;(下边距)   margin-right:50px;(右边距) margin-left:50px;左边距

简写:为了缩短代码,可以使用一个属性中margin指定的所有边距属性

1.margin:25px 50px 75px 100px;(上边距为25px,右边距为50px,下边距为75px,左边距为100px)

2.margin:25px 50px 75px;(上边距为25px,左右边距为50px,下边距为75px)

3.margin:25px 50px;(上下边距为25px,左右边距为50px)

4.margin:25px;(所有的4个边距都是25px)blob.png  blob.png

CSS padding(填充):定义元素边框与元素内容之间的空间,即上下左右的内边距;padding-top:25px;(上内边距),padding-bottom:25px;(右内边距),padding-right:50px;(下内边距),padding-left:50px;(左内边距);

简写:跟margin属性简写相同;

CSS 分组 和 嵌套 选择器

分组选择器;样式表中有很多具有相同样式的元素blob.png

嵌套选择器:适用于选择器内部的选择器的样式

p{ }: 为所有 p 元素指定一个样式;blob.png blob.pngblob.png

.marked{ }: 为所有 class="marked" 的元素指定一个样式;blob.png

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式;blob.png blob.png 

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式;blob.png  blob.png   blob.png


CSS 尺寸 (Dimension);许你控制元素的高度和宽度。同样,它允许你增加行间距;

height属性:设置一个段落的高度和宽度:blob.pngauto:默认。浏览器会计算出实际的高度

line-height属性:用百分比数值在段落里面设置行高p.small {line-height:90%}

max-height属性:设置段落的最大高度max-height:50px;

max-width属性:设置段落的最大宽度max-width:100px;

min-height属性:设置段落的最低高度 min-height:100px;

min-width属性:置段落的最小宽度min-width:1000px

CSS Display(显示) 与 Visibility(可见性):display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏      隐藏元素 - display:none或visibility:hidden

visibility:hidden  可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间  h1.hidden {visibility:hidden;}

display:none  可以隐藏某个元素,且隐藏的元素不会占用任何空间  h1.hidden {display:none;}

css position 属性指定了元素的定位类型;元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法;

static定位:HTML 元素的默认值,即没有定位,遵循正常的文档流对象,静态定位的元素不会受到 top, bottom, left, right影响position: static

fixed定位:元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动   position:fixedblob.png

relative定位:相对定位元素的定位是相对其正常位置

position:relative;left:-20px;blob.pngleft:20pxblob.png移动相对定位元素,但它原本所占的空间不会改变

absolute定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>  position:absoluteblob.pngblob.png

sticky定位:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换, Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix          position: -webkit-sticky; position: sticky;blob.png  blob.png

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

overflow visible:默认值。内容不会被修剪,会呈现在元素框之外blob.png  blob.png

overflow hidden:内容会被修剪,并且其余内容是不可见的  blob.png      blob.png

overflow scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容blob.png  blob.png

overflow auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容blob.png   blob.png

overflow inherit:应该从父元素继承 overflow 属性的值

CSS 的 Float(浮动使元素向左或向右移动,其周围的元素也会重新排列;元素的水平方向浮动,意味着元素只能左右移动而不能上下移动,个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止,浮动元素之后的元素将围绕它,不会受影响,如果图像是右浮动,下面的文本流将环绕在它左边    float:right    blob.png

如果把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻;blob.png  blob.png

clear 属性指定元素两侧不能出现浮动元素blob.png      blob.png




« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。