CSS学习

已于 2023-11-15 15:45:14 修改
阅读量9.3k 收藏
点赞数
分类专栏： Java Web 文章标签： css 学习 笔记
于 2023-11-07 18:32:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51970364/article/details/134273467
版权

文章目录

CSS

CSS：层叠样式表

CSS书写顺序：

  1. 浮动 / display
  2. 盒子模型：margin border padding 宽度高度背景色
  3. 文字样式

导入方式

  1. 内联样式：在标签内使用style属性（耦合较高，较少使用）

    <div style="color: red"> HELLO CSS </div>

  2. 内部样式：定义 < style > 标签，在标签内定义css样式；

    （一般写在head标签里，title标签下面）

    <style>
/*选择器 { 样式 } */
/*给谁改样式 { 改什么样式 } */
p {
    color: red;		/*键值对用:分开，每行用;结尾*/
    fon-size: 12px;
}
</style>

  3. 外部样式：定义link标签，引入外部的css文件

    <link rel="stylesheet" href="demo.css">

    /*demo.css*/
div{
	color: red;
}

规范：

选择器、属性名、属性值统一小写；

选择器（标签）和大括号中间带空格；

冒号后带空格

选择器

  • 标签选择器：元素名称{color: red;}

    div{color: red}

  • id选择器：#id属性值{color: red;}

    注意：id是唯一的，一般与js配合制作动态效果

    #name{color: red;}
<div id="name">hello css</div>

  • 类选择器：.class属性值{color: red;}

    .cls{color: red;}
<div class="cls">helle css</div>

  • 通配符选择器：*{ color: red;}

    作用：为页面的所有标签 设置样式。

    *{
	margin: 0;
    padding: 0; /*去除默认的外边距*/
}

更多用法:

  • 后代选择器：选择器1 选择器2 { css }

    作用：根据嵌套关系，选择父元素的 后代中满足条件的元素。

    注：后代包括 儿子、孙子…

    div p{
    ....
}   /* 选择div下的p标签 */

  • 子代选择器： 选择器1 > 选择器2{css}

    作用：选择父元素的子代元素。

    注：子代只包含儿子

  • 并集选择器： 选择器1，选择器2{css}

    作用：用逗号隔开，同时选择多组标签，设置相同的样式。

    注：一般写法是 每个选择器写一行，提高代码的可读性。

  • 交集选择器：选择器1选择器2 { css }

    作用：选中页面中同时满足多个选择器的标签

    注：选择器连着写，且标签选择器优先写在前面。

  • hover伪类选择器：选择器：hover {css}

    作用：在鼠标悬停在元素上时 会出现的状态样式

字体和文本样式

字体样式

  • 字体大小：font-size

    取值：数字+px

    谷歌浏览器默认文字大小是16px

    p{
    font-size: 30px
}

  • 粗细：font-weight

    取值：normal，bold；（指正常和加粗）

    或取100到900的整百数，正常是400，加粗是700

  • 样式：font-style （是否倾斜）

    取值：normal，italic（正常和倾斜）

  • 类型系列：font-family

    取值：微软雅黑，黑体…等等，最后应该加sans-serif（无衬线字体）（从设置的第一种字体开始选，没有就选择下一个电脑有的字体）

  • 字体font连写：

    取值：font：style weight size family（可以省略前两个值，为默认值）

    复合属性：一个属性后面写多个值的写法

    font: italic 700 66px 宋体
文本样式

  • 文本缩进：text-indent

    取值：数字+px 或 数字+em（1em=当前标签的大小，推荐）

    p{
    text-indent: 2em  /*缩进两字符*/
}

  • 文本水平对齐方式：text-align

    属性值：left，center，right；分别是左对齐，居中，右对齐

    注：text-align 其实是内容对齐，不仅仅用于文本， 能用于 文本、span标签、a标签、input标签、img标签 。不过需要在以上元素的父元素设置，如。

  • 文本修饰：text-decoration

    取值：underline，line-through，overline，none；分别是下划线（常用)，删除线，上划线，无装饰线（常用)。

line-height行高

作用：控制一行的上下行间距

取值：数字+px 或 倍数（当前标签font-size的倍数）

注意：

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family

font:ita1ic 700 66px/2 宋体;

标签水平居中： margin：0 auto

margin：0 auto 一般用于有固定宽度的盒子，如果没有宽度，会默认占满父元素的宽度。

背景

背景色：background-color:

背景图：background-image: url(‘…’)

背景平铺：background-repeat：

取值效果
repeat默认，水平和垂直方向平铺
no-repeat不平铺
repeat-x沿水平方向平铺
repeat-y沿垂直方向平铺

背景位置：background-position：x值 y值；

方向名词

  • 水平：left，center，right
  • 垂直：top，center，bottom

数字+px（坐标）

背景相关属性连写

顺序无要求，推荐顺序：background：color image repeat position

元素显示模式

< >可以叫标签，标记，元素。

  • 块级元素

    独占一行，宽度默认是父元素的宽度，高度由内容撑开，可以设置宽高

    如：div，p，h系列，ul，li，dl，dt，dd，form，header

  • 行内元素

    一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高

    如：a，apar，b，u，i，s，strong，ins，em，del

  • 行内块元素

    一行可以显示多个，可以设置宽高

    如：image，input，textarea，button，select

元素显示模式转换：

作用：改变元素默认的显示特点，让元素符合布局要求

语法：

属性效果
display: block转成块级元素
display: inline-block转成行内块元素
display: inline转成行内元素

元素的嵌套规范

  • 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…

    但是：p标签中不要嵌套div、p、h等块级元素

  • a 标签内部可以嵌套任意元素

    但是：a标签不能嵌套a标签

CSS特性

  • 继承性：子元素默认继承父元素的样式特点

    控制文字属性的都可以继承，如：

    color，font- ，text- ，line-height 。。。。

    但有例外：a标签的color有自己的蓝色，h系列的font-size有自己的字体大小，都会继承失效。

  • 层叠性：覆盖，后面的覆盖前面的

  • 优先级：

    继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

    !important可以提升选择器的优先级到最高，写在属性值的后面，分号的前面。

    注：继承的优先级不能用 !important提高，它的优先级最低。

盒子模型

页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局。

盒子构成

  • 内容区域 content

  • 内边距区域 padding

    取值：可以四个，三个，两个，一个值

    padding: 10px 20px 30px 40px （对应上 右 下 左，即逆时针开始数）

    padding: 10px 20px 30px （对应上 左右 下，也是逆时针）

    padding： 10px 20px（对应上下 左右，也是逆时针）

  • 边框区域 border

    如：border：10px solid red ——>10像素，直线，红色（粗细，线段样式，颜色）

    如果只需要一边的边框线，则border-方向即可，如：border-left/ right/ top/ bottom

    线段：直线solid，dashed虚线，dotted点线（其他的线用不着，需要的用图片）

    快捷键：bd

  • 外边距区域 margin

自动内减

box-sizing：border-box

给盒子设置border或paddingl时，盒子会被撑大，需要再次设置参数，手动计算麻烦，所以有了自动内减，浏览器会自动计算，在内容中减去相应大小。

清除默认的内外边距

margin：0；

padding：0；

淘宝网的：

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
	margin:0;
	padding:0;
}

京东的：

*{
	margin: 0;
	padding: 0;
}
一些问题

  • 塌陷现象：

    场景：相互嵌套的块级元素，子元素设置了margin-top，会同样作用在父元素上。致使父元素一起往下移动。

    解决：

    • 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
    • 给父元素设置 overflow: hidden
    • 转换成行内块元素
    • 设置浮动

浮动

结构伪类选择器

根据元素在HTML的结构关系查找元素。常用于查找某父级选择器的子元素。

优势：减少对HTML中类的依赖，有利于保持代码的整洁。

选择器说明
E:first-child{}匹配父元素中第一个子元素，且是E元素
E:last-child{}匹配父元素中最后一个子元素，且是E元素
E:nth-child(n){}匹配父元素中第n个子元素，且是E元素
E:nth-last-child(n){}匹配父元素中倒数第n个子元素，且是E元素

n可以写成公式，如4n+1，则会选中第5个，第9个…

伪元素

一般在页面的非主体内容可以使用伪元素。

伪元素作用
::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

注：必须设置content属性才能生效，伪元素默认是行内元素

例：

<head>   
	<style>
        .father::before{
            content: '老鼠';
        }
        .father::after{
            content: "大米";
        }
    </style>
</head>
<body>
    <!-- 老鼠爱大米 -->
    <div class="father">爱</div>
<body>
浮动特点

  • 浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置

    标准流：又称文档流 ，指浏览器在渲染网页时默认采用的一套排版规则。

  • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

  • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  • 浮动元素有特殊的显示效果

    • 一行可以显示多个
    • 可以设置宽高

注：浮动的元素不能使用text-align: center或者margin: 0 auto 设置

清除浮动

浮动带来的问题：如果子元素浮动了，此时子元素不占位置，不能撑开标准流的块级父元素。

解决：

  1. 直接设置父元素的高度

    优点：简单

    缺点：有些布局中不能固定父元素高度

  2. 额外标签法

    在父元素内容的最后添加一个块级元素，并对其设置 clear: both。

    缺点：添加了额外标签，会使HTML结构变复杂

  3. 单伪元素清除法

    用伪元素替代了额外标签。

    /*基本写法*/
.clearfix::after{	/*clearfix常用作需要清除浮动的元素的类名*/
	content: '';
	display: block;
	clear: both;
}
/*补充写法*/
.clearfix::after{
    content: '';
	display: block;
	clear: both;
    /*补充的部分是为了在网页中看不见伪元素*/
    height: 0;
    visibility: hidden;
}

  4. 双伪元素清除法

    .clearfix::before,
.clearfix::after{
	content: '';
	display: table;
}
.clearfix::after{
	clear: both;
}

    优点：可以在项目中直接使用，直接给标签加类clearfix即可清除浮动。

  5. 设置overflow：hidden

    直接给父元素设置overflow：hidden即可。

    优点：方便

定位

可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况

应用：定位之后的元素层级最高，可以层叠在其他盒子上面，也可以让盒子始终固定在屏幕中的某个位置。

定位种类

属性名：position:

属性值：

定位方式属性值
静态定位static（加不加效果一样）
相对定位relative
绝对定位absolute
固定定位fixed
粘性定位sticky

偏移值：水平和垂直方向各选一个即可（都写的话以left和top为准）

方向属性名属性值含义
水平left数字px距离左边的距离
水平right数字px距离右边的距离
垂直top数字px距离上边的距离
垂直bottom数字px距离下边的距离

属性值 也可以用 % 来设置，这样就是以参照物来看，如 50%就是左边界在参照物的中间。

  • 相对定位——position: relative

    相对于非静态定位的父元素进行移动。

    .box{
    position: relative;
    left: 100px;
    top: 200px;
}
    • 原位置仍在页面 中占位置(没有脱标)

  • 绝对定位——position: absolute

    就近找已经定位的父级为参照进行定位，没有定位的父级，则默认相对于浏览器可视区域(即)进行移动。（子绝父相）

    • 原位置在页面中不占位置(已经脱标)

    • 绝对定位的盒子模式具备行内块特点

    例题：让元素的位置处于浏览器或参照物正中间。

    .box{
	position: absolute;
 left: 50%;
 margin-left: -150px;/*宽的一半*/

 top: 20%;
 margin-top: -200px;/*高的一半*/
 /*transform:translate(-50%,-50%); 上面的margin位移也可以写成这个，位移自己的一半*/

 width: 300px;
 heght: 400px
	background-color: pink;
}

  • 固定定位——position: fixed

    特点：

    • 脱标，不占位置；

    • 参照浏览器窗口改变位置；

    • 具备行内块特点

  • 粘性定位——position: sticky

    可看作是相对定位和固定定位的混合，允许被定位的元素表现的像相对定位一样，直到滚动至某个阈值点为止，之后变为固定。（如：顶部导航栏最多滚动至顶部起10px，之后固定）

    必须指定 top, right, bottom, left 四个阈值其中之⼀，粘性定位才生效。

    .xxx {
    position: sticky;
    top: 30px;
    left: 30px;
}
层级关系

不同布局：标准流 < 浮动 < 定位

而相对，绝对，固定三种定位方式层级相同，谁写在下就覆盖其他的。

一些应用

  • 元素居中：

    1. 先设定width或height；
    2. 将left，right 或 top，bottom 距离设置为0；
    3. 将left，right 或 top，bottom 的margin设置为auto

    绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。

  • 元素的重叠：

    设置元素的堆叠顺序： z-index

  • 绝对定位、固定定位的补充：

    • 如果没有指定宽高，默认大小是内容的大小；
    • 一定是块盒；
    • 一定不会浮动；
    • 不会发生外边距合并；
    • 会盖住下面常规流的所有内容（浮动元素只会盖住盒子，不会盖住里面的文字图片，因为浮动元素最初是做文字环绕效果的）

装饰

浏览器解析 行内 和 行内块 时当作文字，会根据基线对齐，所以导致常常图片或按钮之类的与文本框或背景对不齐。

垂直对齐

属性名：vertical-align

属性值：

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中间对齐
bottom底部对齐
光标类型

设置鼠标光标在元素上时显示的样式。

属性名：cursor

属性值：

属性值效果
default默认值，通常是箭头
pointer小手，提示可以点击
text工字型，提示可以选择文字
move十字光标，提示可以移动
边框圆角

场景：让盒子四个角变得圆润，增加页面细节。

属性名：border-radius

常见取值：数字+px、百分比（指圆角半径）

赋值规则：从左上角开始，顺时针赋值，没有赋值的看对角

画一个正圆：

盒子为正方形，设置圆角为盒子宽高的一半，即 border-radius: 50%

按钮胶囊：

盒子为长方形，设置圆角为盒子 高度 的一半，即 border-radius: 50%

也可以使用clip-path属性：

clip-path: circle(45%)
溢出部分显示

溢出部分：指盒子内容部分所超出盒子范围的区域。

overflow用于控制内容溢出部分的显示效果，如：显示/隐藏滚动条。

属性名：overflow

属性值：

属性值效果
visible默认值，溢出部分可见
hidden溢出部分隐藏
scroll无论是否溢出，都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条
元素本身隐藏

让某元素本身在屏幕中不可见，如：鼠标hover之后元素隐藏，用于隐藏/显示子菜单之类的场景

属性：

  • visibility: hidden

    占位置的隐藏效果，用的不多

  • display: none

    脱标的隐藏效果（不占位置）

    display：black 显示元素

元素整体透明

让某元素（包括内容）一起变透明。

属性名：opacity

属性值：0~1之间的数字——0为完全透明

弹性盒子display:flex

flex用于 按行或按列布局元素（一维布局）。

设置容器为flex后，其子元素的 float 、 clear 、 vertical-align 属性将失效。

flex容器的属性：

  • flex-direction ：主轴反向

    .box {
    flex-direction: row; /* 默认值，横向从左⾄右排列 */
    flex-direction: row-reverse; /* 横向从右⾄左排列 */
    flex-direction: column; /* 纵向从上到下排列 */
    flex-direction: column-reverse; /* 纵向从下到上排列 */
}

  • flex-wrap： 超出父容器的子容器的排列方式

    flex容器 {
    flex-wrap: wrap; /* ⾥⾯的flex项溢出时会⾃动换⾏ ，第⼀⾏在上⽅*/
    flex-wrap: wrap-reverse; /* ⾥⾯的flex项溢出时会⾃动换⾏ ，第⼀⾏在下⽅*/
}
flex项 {
    flex: 200px
}

  • flex-flow：上两者的合并写法

    {
    flex-flow: row wrap;
}
/* 等价于 */
{
    flex-direction: row;
    flew-wrap: wrap;
}

  • justify-content：子容器在主轴的排列方向和空间分配

    flex容器 {
    display: flex;
    justify-content: stretch; /* ⾃动⼤⼩（auto-sized）的flex项会拉伸 */
    justify-content: flex-start; /* 默认值，flex项从flex容器起始线开始排列 */
    justify-content: flex-end; /* flex项从flex容器终⽌线开始排列 */
    justify-content: center; /* flex项在flex容器中间排列 */
    justify-content: space-around; /* 每个flex项左右空间相等 */
    justify-content: space-between; /* flex项间的间隔相等，第⼀个和最后⼀个flex项靠在左右两端 */
}

  • align-items：子容器在交叉轴的排列方向

    flex容器 {
    display: flex;
    align-items: stretch; /* 默认值，flex项会拉伸⾄填满flex容器交叉轴 */
    align-items: flex-start; /* flex项依flex容器的顶部对⻬ */
    align-items: flex-end; /* flex项依flex容器的底部对⻬ */
    align-items: center; /* flex项在交叉轴居中对⻬ */
}

  • align-content：多主轴情况下⼦容器在交叉轴上的对齐和空间分配

    flex-item {
    align-content: stretch; /* 默认值，flex项拉伸占满整个交叉轴 */
    align-content: flex-start; /* flex项依flex容器的顶部对⻬ */
    align-content: flex-end; /* flex项依flex容器的底部对⻬ */
    align-content: center; /* flex项在交叉轴居中对⻬ */
    align-content: space-between; /* 在交叉轴两端对⻬，轴线之间的间隔平均分配 */
    align-content: space-around; /* 轴线间的间隔⽐轴线与边框的间隔⼤⼀倍 */
}

flex项的属性：

  • flex-grow：flex项在可用空间中的拉伸比例（沿主轴方向增长尺寸）

  • flex-shrink：flex项超出主轴时的压缩比例

  • flex-basis：flex项在不伸缩情况下的原始尺寸（默认auto，采用元素内容的尺寸）

  • flex：flex-grow, flex-shrink, flex-basis 的简写属性

    flex项 {
    flex: initial; /* 默认值，相当于 flex: 0 1 auto; 即不可拉伸，可以收缩 */
    flex: auto; /* 相当于 flex: 1 1 auto; 即可以拉伸也可以收缩 */
    flex: none; /* 相当于 flex: 0 0 auto; 即不可拉伸也不可收缩 */
    flex: 正整数; /* 相当于 flex: 1 1 0; 即可以在 flex-basis==0的基础上伸缩
}

    /* 每个flex项占用空间相等, 最小值是200px */
flex项 {
    flex: 1 200px;
}
/* 第二个flex项是其他的2倍 */
flex项:nth-of-type(2) {
    flex: 2 200px;
}

  • order：flex项的排列顺序， 默认为0，值越小越靠前

    /* 第一个按钮移到主轴的末尾 */
button:first-child {
    order: 1;
}
/* 第二个按钮移动到主轴的最前面 */
button:last-child {
    order: -1;
}

  • align-self：可使自己覆盖flex容器上设置的 align-items 值

    flex-item {
    align-self: auto; /* 默认值，继承flex容器的align-items值 */
    align-self: flex-start / flex-end / center / stretch; /* 与align-items值的含义类似 */
}

网格布局display:grid

grid布局是二维布局，能把内容按照行与列的格式排版。

基本概念：

  • 网格容器：采用网格布局的区域；
  • 网格项：容器内的子元素；
  • 网格线：网格的水平和垂直的分界线；
  • 网格轨道：相邻两条网格线之间的空间，即行、列。
  • 网格单元格：被网格线围起来的最小单元格。
  • 网格区域：任意四条网格线组成的空间，包含若干单元格。

使用：

  • 定义：默认创建一列或一行的网格

    .container {
    display: grid; /* 设置⽹格布局，一列 */
    display: inline-grid; /* 设置⽹格布局，一行 */
}

  • 设置行列：

    .container {
    display: grid;
    grid-template-columns: 200px 200px 200px;/*设置3个列，宽度各为200px*/
    grid-template-rows: 200px 200px 200px;/*设置3个行，行高各为200px*/
}

    .container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr /*设置3个列，宽度比为2:1:1*/
}

    可以混搭：

    container {
    display: grid;
    grid-template-columns: 100px auto 2fr;
}

  • 重复构建行列：repeat()

    .container {
    display: grid;
    grid-template-columns: repeat(3, 2fr 1fr); /*相当于2fr 1fr 2fr 1fr */
}

  • 自动多列填充： auto-fill

    container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px); /*包含多个100px列宽的网格，将容器填满*/
}

  • 行列最小尺寸： minmax()

    container {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(200px, 1fr); /*列宽不小于200px，不大于1fr*/
}

  • 网格间隙：gap

    container {
    display: grid;
    grid-template-columns: 2fr 1fr
    gap: 20px 50px; /*行间距20px,列间距50px*/

  • 网格区域： grid-template-areas

    • 需要填满网格的每个格子
    • 对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字
    • 所有名字只能出现在⼀个连续的区域，不能在不同的位置出现
    • ⼀个连续的区域必须是⼀个矩形
    • 使用 . 符号，让⼀个格子留空
    .container {
    display: grid;
    grid-template-areas: /* 3⾏2列 */
    "header header"
    "sidebar content"
    "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap:20px;
}
    
header {
    grid-area: header; /* 指定<header>元素的位置 */
}
    
article {
    grid-area: content; /* 指定<article>元素的位置 */
}
    
aside {
    grid-area: sidebar;
}
    
footer {
    grid-area: footer;
}

  • 内容对齐：

    • 设置整个内容区在容器的对齐方式（在容器中设）：
      • justify-content 属性是整个内容区域在容器里面的水平位置（左中右），
      • align-content 属性是整个内容 区域的垂直位置（上中下）。
      • place-content 属性是 align-content 属性和 justify-content 属性的合并简写 形式。
    • 设置所有网格项在单元格中的对齐方式（在容器中设）：
      • justify-items 属性设置单元格内容的水平位置（左中右），
      • align-items 属性设置单元格内容的垂直位置 （上中下）。
      • place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。
    • 设置某个网格项在单元格中的对齐方式（在网格项中设）
      • justify-self 属性设置单元格内容的水平位置（左中右），
      • align-self 属性设置单元格内容的垂直位置（上 中下）。
      • place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。

居中方法总结

水平居中

  • 行盒：

    text-align: center;

  • 块盒：

    子元素宽度固定：

    • 方法1： margin: 0 auto

      .inner {
    width: 200px; /* 宽度固定 */
    margin: 0 auto; /* ⽔平居中 */
}

    • 用绝对定位：

      .container {
    width: 500px;
    height: 500px;
    position: relative;
}

.inner {
    width: 200px; /* 宽度固定 */
    height: 100px;
    position: absolute;
    left: 50%;	/*定位到中线*/
    margin-left: -100px /*外边距设为宽度的一半*/
}

      或者：设定元素的宽度 width ，然后设置左右两边的定位坐标为0（即： left: 0; right: 0 ），并将左右 margin 设 置为 auto 。

      div { /* 假定 div 为 p 的⽗元素 */
    position: relative;
}
p {
    width: 200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;

    子元素宽度未知：

    • 将子元素设置为行内块元素，然后⽗元素设置 text-align: center 。

      .container {
    width: 500px;
    height: 500px;
    text-align: center; /* 内容居中 */
}
.inner{
    display: inline-block; /* 设置为⾏块盒 */
}

  • 多个块盒元素：

    • 方法一： 使⽤ display: inline-block 和 text-align: center

      .container {
    width: 500px;
    height: 500px;
    text-align: center; /* 内容居中 */
}
.inner{
    display: inline-block; /* 设置为⾏块盒 */
    width: 100px;
    height: 150px;
}

    • 使用flex布局：

      弹性盒⼦中的 Flex items的⽔平居中可使⽤ justify-content 属性设置，使其中的 Flex items沿主轴对⻬。

      .container {
    width: 500px;
    height: 500px;
    display: flex; 
    justify-content: center /* 在主轴上居中 */
}
.inner{
    width: 100px;
    height: 150px;
}
垂直居中

  • 单行行内元素：

    将子元素的行高（ line-height ）等于高度（ height ）就可以了。

    .container {
    width: 500px;
    height: 500px;
}
.inner{
    display: inline-block; 
    height: 150px;
    line-height: 200px;
}

  • 多行元素：

    • 使用绝对定位：

      .container {
    width: 500px;
    height: 500px;
    position: relative;
}
.inner{
    width: 100px;
    height: 100px; /*高度固定*/
    position: absolute;
    top: 50%;	/*定到中线*/
    margin-top: -100px; /*外边距设为高度的一半*/
}

      或设定元素的高度 heigh ，然后设置上下两边的定位坐标为0（即： top: 0; bottom: 0 ），并将上下 margin 设置为 auto 。

      div { /* 假定 div 为 p 的⽗元素 */
    position: relative;
}

p {
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto 0;
}

    • 使用flex布局：

      .container {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
}
.inner{
    width: 100px;
    height: 100px;
}

  • 图片文字并排：

    • 使用flex布局：（与上一段代码一致）

    • 给图片设置 vertical-align: middle ，文字盒子设置为 display: inline-block

      * {
	margin: 0;
    padding: 0;
}

.container {
    width: 500px;
    height: 500px;
    line-height: 500px;
}
.container img {
    display: inline-block;
    vertical-align: middle;
}

.container p {
    display: inline-block;
}
ValcanoZz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML和Css的学习
SYX_lh的博客
10-19 3430
学习HTML和Css
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS学习心得
weixin_47223561的博客
03-30 1732
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
HTML+CSS学习总结
weixin_53351919的博客
06-26 2773
html+css学习总结
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2166
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记
Curry_On的博客
10-26 2256
CSS学习笔记 本文根据B站pink老师视频整理，供复习参考 笔记内容（更新中）：
CSS学习总结
weixin_45148589的博客
03-13 3139
目录一、学习收获通过上次课的学习，对CSS有了如下的了解和收获：1.对CSS的背景的了解2.CSS的基本概念的学习3.对CSS的一些语法的掌握4.对于CSS的样式及生效的具体深入学习外部样式表内部样式表内联样式级联的优先级5.对CSS中颜色、尺寸、对齐等概念的学习6.CSS的盒子模型的学习7.对CSS的边框边距设置的学习8.对CSS中的定位概念的学习9.对CSS中溢出功能的学习10.对CSS中浮动的学习11.CSS中不透明度的调节学习12.对于CSS中组合选择器的学习13.最后的伪类伪元素的学习二、总结 一
黑马程序员pink老师_CSS学习笔记
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
CSS学习总结与心得体会
m0_49305575的博客
07-11 6498
CSS的学习总结与心得体会 CSS又称为层叠样式表，学习CSS就是学习许多选择器以及属性。CSS的主要作用是对前端页面进行布局与美化。 布局 盒子模型 块级元素并排显示 盒子模型 盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。 margin(外边距)：清除边框外的区域，外边距是透明的； border(边框)：
css学习心得
fengqing0527的博客
12-07 6246
css学习心得
css学习文档
09-03
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面
CSS学习手册
12-26
**CSS学习手册** 在网页设计领域，层叠样式表（Cascading Style Sheets，简称CSS）是不可或缺的一部分，它赋予HTML或XML文档以视觉样式，让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册，我们将深入...
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
旋转木马案例
喵喵的博客
07-08 489
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 337
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
如何使一个盒子水平垂直居中（常用的）
karlaofsky的博客
07-08 356
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。//子元素宽度的一半。//子元素高度的一半。来直接减去盒子自身的50%大小。将盒子的上下左右定位全部设置为0，同时设置外边距自适应。
前端面试题25（css常用的预处理器）
最新发布
God's asylum的博客
07-08 225
在前端开发领域，CSS预处理器在面试中经常被提及，其中最流行的三种预处理器是Sass、LESS和Stylus。
移动端CSS的学习笔记。
01-19
移动端的CSS学习是移动端开发中非常重要的一部分，因为移动端设备的屏幕尺寸各异，需要对不同尺寸的设备做出相应的适配和响应式布局。在学习移动端CSS的过程中，有一些基础知识和技巧是需要掌握的，比如移动端浏览器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值