CSS学习笔记（二）

最新推荐文章于 2024-04-26 22:14:41 发布

栖陆@.

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量227

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_61879501/article/details/122560463

版权

盒子模型

Margin（外边距）

清除边框外的区域，外边距是透明的。

Border（边框）

围绕在内边距和内容外的边框。

Padding（内边距）

除去内容后的区域，内边距是透明的。

Content（内容）

文本和图像等。

边框

（一）border-style：1,2,3,4

对应顺序：上右下左

（二）border-style：1,2,3

对应顺序：上>右左>下

（三）border-style：12

对应顺序：上下>左右

border-style

当使用"border-left-width"、"border-color"、"border-right-color"等时，要先使用border-style属性设置borders。

嵌套

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

尺寸

height：设置元素的高度
line-height：设置行高
max-height：设置元素的最大高度
max-width：设置元素的最大宽度
min-height：设置元素的最小高度
min-width：设置元素的最小宽度
width：设置元素的宽度

CSS Display

块级元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

address,blockquote,center,dir,div,dl,fieldset,form,h1...h6,hr,isindex,menu,noframes,noscript,ol,p,pre,table,ul,li.

内联元素

内联元素只需要必要的宽度，不强制换行。

a,abbr,,acronym,b,bdo,big,br,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textaera,tt,u,var.

改变元素的显示

display:block--显示为块级元素
display:inline--显示为内联元素
display:inline-block--显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

注：我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

CSS Position（定位）

position的五个值：

一、static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

二、fixed

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

三、relative

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

移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

四、absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

五、sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position:sticky;基于用户的滚动位置来定位

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

注：Safari需要使用-webkit-sticky;

重叠的元素

z-index属性指定了一个元素的堆叠顺序。

例如：z-index:-1;

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

Overflow

可用于处理元素内溢出的内容。

scroll：建立滚动条
hidden：隐藏
auto：如果内容被修剪，则浏览器会显示滚动条以查看剩余内容
visible：默认，会显示在元素框以外

加油明天把CSS学习笔记三肝出来！