CSS - 常用属性和布局方式

目录

前言

一、常用属性

1.1、字体相关

1.2、文本相关

1.3、背景相关

1.3.1、背景颜色

1.3.2、背景图片

1.4、圆角边框

二、常用布局相关

2.1、display

2.2、盒子模型

2.2.1、基本概念

2.2.2、border 边框

2.2.3、padding 内边距

2.2.4、margin 外边距

2.3、弹性布局

2.4、实际开发常用小技巧

前言

这里推荐一个 CSS 属性网站，里面的样式很全，忘记了也可以在这里查~

CSS 参考手册

一、常用属性

1.1、字体相关

        .one {/* 字体家族: 默认是微软雅黑 */font-family: "宋体";/* 字体大小 */font-size: 100px;/* 字体粗细 */font-weight: 900;/* 设置字体倾斜*/font-style: italic;}

例如 hello ，效果如下 

1.2、文本相关

        /* 文本相关 */.two {font-size: 100px;color: red;/* 文本对齐: left左对齐、right右对齐、center居中对齐 */text-align: center;/* 文本装饰：underline下划线、none去除下划线(a 标签) */text-decoration: underline;/* 文本缩进 */text-indent: 20px;/* 行高(行间距) */line-height: 100px;}

例如 world ，效果如下：

1.3、背景相关

1.3.1、背景颜色

        .three {width: 200px;height: 500px;background-color: green;}

1.3.2、背景图片

a）通过 background-image 来设置一个背景图片

        .one {width: 2000px;height: 2000px;background-color: grey;background-image: url(img/logo.png);}

Ps：background: rgba(0, 0, 0, 0.2);  中前三个是三原色调色，最后一个是半透明程度 

例如一个小鸭子图标，使用 background-image 设置背景图片，默认都是 “平铺” ，就类似于铺地砖一样，效果如下： 

b）可以使用 background-repeat 来禁止平铺，如下：

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景图片 */background-image: url(img/logo.png);/* 禁止平铺 */background-repeat: no-repeat;}

c）可以 backgroud-position 来设置背景图的位置

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景图片 */background-image: url(img/logo.png);/* 禁止平铺 */background-repeat: no-repeat;/* 设置位置 */background-position: center center;}

d）设置背景图的大小

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景图片 */background-image: url(img/logo.png);/* 禁止平铺 */background-repeat: no-repeat;/* 设置位置 */background-position: center center;/* contain 表示保证图片原有比例的情况下填满容器，cover 表示一定填满容器（忽略比例）
，当然也可以自己手动指定宽高 *//* background-size: contain; */background-size: 2000px 2000px;}

1.4、圆角边框

a）通过 border-radius 可以设置圆角矩形（值为内切圆半径）

        .one {width: 300px;height: 300px;background-color: greenyellow;border-radius: 30px;}

b）如果是一个正方形，并且 border-radius 的值刚好是边长的一般，此时就得到了正圆形（头像一般都是这么设置的）.

        .one {width: 300px;height: 300px;background-color: greenyellow;border-radius: 150px;}

二、常用布局相关

2.1、display

  • 块级元素： display: block;   
  • 行级元素：display: inline;
  • 隐藏元素：display: none;

每个 html 元素都会有默认的 display 属性，例如 h1 ~ h6、p、div、ul、ol、li、table...... 默认都是 block 块级元素.  而  a 、span、img 默认都是 inline 行级元素.

区别有很多，主要是以下两个方面：

  1. 块级元素默认独占一行，行内元素默认不独占一行
  2. 块级元素可以设置尺寸（width、height），行内元素则不能.

Ps：因此在实际的开发中，我们经常会把行内元素（比如 span），通过 display: block 改成块级元素.

2.2、盒子模型

2.2.1、基本概念

一个 HTML 元素，就是一个矩形的盒子，组成如下：

Ps：这些属性只有块级元素设置才生效

  • margin：外边距.  可以想象成每个房子（盒子）之间的距离.
  • border：边框.  可以想象成房子的墙壁.
  • padding：内边距. 可以想象成墙壁和内部家具（content）的距离.

2.2.2、border 边框

a）border：边框.  可以想象成房子的墙壁.

    <style>.one {width: 400px;height: 500px;background-color: grey;/* red边框颜色、20px边框粗细、solid边框为实线 */border: red 20px solid;}</style>

b）边框也可以分开设置

        .one {width: 400px;height: 500px;background-color: grey;/* red边框颜色、20px边框粗细、solid边框为实线 *//* border: red 20px solid; *//* 边框也可以分开设置 */border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid;}

边框使用注意事项：

设置了边框粗细以后，虽然给 div 设置的尺寸例如是 500*400，但实际上可能却变成了 540* 340，这是因为边框把元素给撑大了！

在实际的开发中，一般不希望见到这种情况，因此可以使用 box-sizing:border-box 属性来避免此情况.

一般会对所有元素都进行如下设置：

        * {box-sizing: border-box;}

2.2.3、padding 内边距

a）内边距，就是元素和边框的距离，可以想象成墙壁和内部家具的距离.

        .one {width: 400px;height: 500px;background-color: grey;border: red 20px solid;padding: 30px;}

b）也可以设置给四个方向分别设置

        .one {width: 400px;height: 500px;background-color: grey;border: red 20px solid;/* padding: 30px; *//* 可以分别给四个方向设置 *//* padding-left: 20px; *//* 给上下设置 30px，左右设置 20px *//* padding: 30px 20px; *//* 给四个方向分别设置，顺序是 上右下左 顺时针顺序设置 */padding: 10px 20px 30px 40px;}

2.2.4、margin 外边距

外边距：可以想象成每个房子（盒子）之间的距离，用法和 padding 基本一样

这里讲一个特殊用法：把 margin 左右方向设置为 auto ，可以实现元素水平居中的效果（前提是块级元素，并且有设置 width），但是垂直方向设置为 auto，则不能垂直居中.

        .one {width: 400px;height: 500px;background-color: grey;margin: 100px auto;}

2.3、弹性布局

前面讲到，块级元素默认是独占一行的（垂直方向排列的），有时又想让块级元素能够水平方向排列，就可以使用弹性布局了.

Ps：行内元素虽然也是水平排列，但是不能设置尺寸.

这里我们只需要知道最基础的三个属性即可.

1.开启弹性布局：display: flex ，某个元素一旦开始了弹性布局，此时内部的子元素（子元素里的子元素不受影响），就会按照水平方向排列.

2.水平方向排列规则：通过 justify-content 属性进行设置. 

例如有以下元素

    <div class="one"><div class="two">0</div><div class="two">2</div><div class="two">3</div><div class="two">4</div><div class="two">5</div></div><style>.two {width: 100px;height: 100px;background-color: greenyellow;border: red 3px solid;}</style>

justify-content: center居中排列：

justify-content: left靠左：

justify-content: right靠右：

justify-content: space-around 分散排列（不占据两边）：

justify-content: space-between（占据两边）：

justify-content: space-evenly（全部均分，包括左右）：

Ps：一般最常用的就是 space-around

3. align-items：设置垂直方向排列，这个一般就用 center 就可以.

        .one {display: flex;justify-content: space-around;align-items: center;}

2.4、实际开发常用小技巧

Ps：如果全局全局属性是 Vue-cli 的工程，那么就在 App.vue 中的 style 添加即可

a）一般在开始写项目的 css 样式时，会先进行以下操作，防止一些干扰.

* {/* 防止边框将元素撑大 */box-sizing: border-box;/* 去除浏览器默认样式 */padding: 0;margin: 0;
}

b）为了让背景图片能铺满整个屏幕，需要给 body 和 html 标签设置自适应高度（随着浏览器的缩放而缩放）

html {height: 100%;
}body {height: 100%;
}

height: 100% 就表示高度和父元素一样高.

解释：由于 body 的父元素时 html，而 html 元素的父元素是浏览器窗口，这里设置 100%，就是让 html 元素和浏览器一样高，再让 body 和 html 一样搞，此时 body 就和浏览器窗口一样高了.

c）版心高度设置：我们在做完导航栏以后，接下来版心的高度该如何设置呢？在 CSS 3 中新出了一个语法    height: calc(100% - 50px);    通过他就可以实现. 

  1. 第一个参数：写100% 就表示父元素的高度.
  2. 第二个参数：50px 就是指导航栏的高度（根据实际情况而定）.

 注意：减号两侧必须要加空格.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/118134.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Golang命令行库

Golang命令行库

前言 有时候我们需要安装公司的软件，或者做个类似 node_explorer 的客户端采集程序，当 ./xx -h 的时候可以看到很多的命令行参数。Golang命令行参数我们可以通过内置的库 os.args 或者 flag库去实现，但是功能较弱。如果使用第三库 会更加功能丰富。 第三方库 cli库 ## ht…
阅读更多...
gcc和makfile

gcc和makfile

gcc和makfile gcc预处理(进行宏替换)编译(生成汇编)汇编(生成机器可以识别的代码)连接(生成可以执行的文件或者库文件) makemakefile文件的编写 gcc 没安装的话&#xff0c;按照终端提示的安装命令安装就行 运行的格式&#xff1a; gcc [选项] [要编译的文件] [选项] [目标文件…
阅读更多...
idea 没加载 provided的包

idea 没加载 provided的包

目录 前言解决方案 前言 我的版本是IntelliJ IDEA 2022.1.4 (Community Edition)&#xff0c;本地调试不知道为什么不加载provided的包。后来找到这篇文章https://youtrack.jetbrains.com/issue/IDEA-107048才知道这是个bug。不知道其他版本会不会出现这种问题。 解决方案 我…
阅读更多...
SylixOS BSP开发(八)

SylixOS BSP开发(八)

初始化FPU、MMU和Cache组件 本来想在不初始化这些部件的情况下把SylixOS先启动起来感受下&#xff0c;结果测试发现如果MMU不使能的话&#xff0c;系统启动过程中线程无法进行调度emm。。。所以只好把这一章节提前来讲了。这三个组件的初始化都是在bspInit.c中进行的。 1. FPU初…
阅读更多...
Unity游戏开发中打造游戏攻击技能架构与设计

Unity游戏开发中打造游戏攻击技能架构与设计

一、技能系统的设计 在 MOBA 游戏中&#xff0c;每个英雄角色都会有多个技能&#xff0c;这些技能可以分为普通攻击和技能攻击两种。普通攻击是英雄角色的基本攻击方式&#xff0c;而技能攻击则需要消耗一定的资源&#xff08;如蓝量&#xff09;才能使用。在设计技能系统时&a…
阅读更多...
【面试经典150 | 链表】循环链表

【面试经典150 | 链表】循环链表

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;哈希集合方法二&#xff1a;快慢指针方法三&#xff1a;计数 拓展其他语言python3 写在最后 Tag 【快慢指针】【哈希集合】【计数】【链表】 题目来源 141. 环形链表 题目解读 判断一个链表中是否存在环。 解题思路 …
阅读更多...
（Java）中的数据类型和变量

（Java）中的数据类型和变量

文章目录 一、字面常量二、数据类型三、变量1.变量的概念2.语法的格式3.整型变量4.长整型变量5.短整型变量6.字节型变量 四、浮点型变量1.双精度浮点数2.单精度浮点数 五、字符型常量六、布尔型变量七、类型转换1.自动类型转换&#xff08;隐式&#xff09;2.强制类型转换(显式…
阅读更多...
react的setState做了什么

react的setState做了什么

1、为什么需要setState setState的作用是帮助我们更改数据的同时并且通知视图进行渲染。因为React并不会绑定视图和state&#xff0c;需要我们手动去更新视图。 2、setState什么时候是同步的&#xff0c;什么时候是异步的 setState这个方法在调用的时候是同步的&#xff0c;…
阅读更多...
技巧 | 如何解决 zsh: permission denied 问题 | Mac

技巧 | 如何解决 zsh: permission denied 问题 | Mac

技巧 | 如何解决 zsh: permission denied 问题 | Mac 问题描述 在 macOS 系统终端执行 sh 程序脚本时&#xff0c;抛出异常 zsh: permission denied 原因分析 用户没有权限&#xff0c;所以才出现了这个错误&#xff0c;所以只需要用 chmod 修改一下权限就可以了 解决方法…
阅读更多...
【人工智能Ⅰ】实验1：谓词表示法与产生式知识表示

【人工智能Ⅰ】实验1：谓词表示法与产生式知识表示

实验1 谓词表示法与产生式知识表示 一、实验目的 1、熟悉谓词逻辑表示法&#xff1b; 2、理解和掌握产生式知识表示方法&#xff0c;实现产生式系统的规则库。 二、实验内容 要求通过C/C/python语言编程实现&#xff1a; 1、猴子摘香蕉问题 2、动物识别系统 &#xff08…
阅读更多...
Spring无法加载静态属性和SpringBoot单元测试指定加载配置文件

Spring无法加载静态属性和SpringBoot单元测试指定加载配置文件

一、Spring无法加载静态属性&#xff0c;怎么解决&#xff1f; Spring主要用于管理和注入Bean&#xff08;对象&#xff09;的实例属性&#xff0c;而不是静态属性。静态属性属于类本身&#xff0c;而不是类的实例&#xff0c;因此Spring的依赖注入机制不会处理它们。 看图&a…
阅读更多...
项目部署Linux步骤

项目部署Linux步骤

1、最小化安装centos7-环境准备 安装epel-release 安装epel-release&#xff0c;因为有些rpm包在官方库中找不到。前提是保证可以联网 yum install -y epel-release 修改IP net-tools net-tool&#xff1a;工具包集合&#xff0c;包含ifconfig等命令 yum install -y net-…
阅读更多...
【MySQL--＞数据操作】

【MySQL--＞数据操作】

文章目录 前言一、insert1.单行插入2.多行插入3.插入更新/替换 二、select1.全列查询2.指定列插入3.列别名4. 表达式计算5.去重6.where条件查询7.排序8.limit分页显示 三、update四、delete五、插入查询结果六、聚合函数六、聚合分组1.格式2.where和having的区别 前言 一、inse…
阅读更多...
个人创业新机遇，零成本开启真人手办定制项目

个人创业新机遇，零成本开启真人手办定制项目

桌上的日历变薄&#xff0c;2023年已经接近尾声&#xff0c;浅观这一年&#xff0c;您是否发现大家日常关注的重点有明显的变化&#xff0c;诸多社会事件和宏观数字的背后&#xff0c;潜藏着对经济的“不托底”&#xff0c;而当我们真正开始关注起用个人经济积累去对冲未来的不…
阅读更多...
大数据Flink（一百零一）：SQL 表值函数（Table Function）

大数据Flink（一百零一）：SQL 表值函数（Table Function）

文章目录 SQL 表值函数（Table Function） SQL 表值函数（Table Function） Python UDTF，即 Python TableFunction，针对每一条输入数据，Python UDTF 可以产生 0 条、1 条或者多条输出数据，此外，一条输出数据可以包含多个列。比如以下示例，定义了一个名字为 split 的Pyt…
阅读更多...
【会员管理系统】篇二之项目搭建、初始化、安装第三方库

【会员管理系统】篇二之项目搭建、初始化、安装第三方库

一、项目搭建 1.全局安装vue-cli npm install -g vue/cli查看版本信息 vue -V 2.创建项目 vue create 项目名称 回车 回车 剩余选择如下 之后等待项目创建 最后npm run serve 二、初始化配置 1.更改标题 打开public下的index&#xff0c;将title标签里的改成想要设置的…
阅读更多...
汽车电子专有名词与相应技术

汽车电子专有名词与相应技术

1.EEA &#xff08;Electronic & Electrical Architecture 电子电气架构&#xff09; EEA在宏观上概括为物理架构与逻辑架构的结合&#xff0c;微观上通过众多电子元器件的协同配合&#xff0c;或集成式或分布式的系统级电子电气架构&#xff0c;具体详见专栏 新能源汽车电…
阅读更多...
大疆DJI RoboMaster 机甲大师知识库和参赛攻略

大疆DJI RoboMaster 机甲大师知识库和参赛攻略

标题链接【RM2021 四川站第二期直播】步兵设计及弹道测试https://bbs.robomaster.com/forum.php?modviewthread&tid11504&extrapage%3D1%26filter%3Dtypeid%26orderby%3Ddateline【RM2021 黑龙江站第4期直播】步兵机械设计入门2https://bbs.robomaster.com/forum.php?…
阅读更多...
contenteditable实现文本内容确认提示

contenteditable实现文本内容确认提示

功能需求&#xff1a; 列表进行批量查询&#xff0c;需要对输入的值做提交校验&#xff0c;分三种情况&#xff1a; 若部分字符串有误&#xff0c;部分字符串需要变更字体颜色做提示&#xff0c;再次点击确认则对部分正确数据执行批量查询 若全部数据有误则变更字体颜色做提示&…
阅读更多...
redis场用命令及其Java操作

redis场用命令及其Java操作

目录 1. Redis入门 1.1 Redis简介 1.2 Redis下载与安装 1.2.1 Redis下载 1.2.2 Redis安装 1.3 Redis服务启动与停止 1.3.1 服务启动命令 1.3.2 客户端连接命令 1.3.3 修改Redis配置文件 1.3.4 Redis客户端图形工具 2. Redis数据类型 2.1 五种常用数据类型介绍 2.2 …
阅读更多...
最新文章

Copyright @ 2022~2023