CSS

最新推荐文章于 2022-10-08 15:03:04 发布
最新推荐文章于 2022-10-08 15:03:04 发布
阅读量116 收藏
点赞数
分类专栏： JAVA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41988545/article/details/106638795
版权

在html页面引入css？

行内：在html页面的标签上增加一个style属性, style属性的值,就是css代码

<p style="background-color:#FF0000; color:#FFFFFF">

内联：写在html页面的<head>标签里,用<style>标签包裹

<head>
<style type=”text/css”>
	p { color:#FF0000;}
</style>
</head>

外联：写在head标签内部

•链接
<link rel="stylesheet" type="text/css" href="css_3.css" />
•导入
•<style type="text/css">
	@import url(css_3.css);
</style>

选择器？

标签选择器：

类选择器：

Id选择器：

复合选择器：

选择器优先级：

如果有两个相同的样式同时作用于某一个html元素, 那么就会在这两个样式间产生一个优先级问题

•!important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符 
在满足上述优先级的基础上, 要满足一个’就近原则’(上下结构的就近原则)

Html代码,在浏览器中解析的时候, 是从上向下解析的

盒子模型：

我们把html的标签在页面上所占据的位置看成一个矩形的盒子
这个盒子分为四部分:   元素内容   内边距   边框  外边距

块级元素：

独占一行, 上下排列
•独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
•可以直接控制宽度、高度以及盒子模型的相关css属性
•在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度(宽度能继承)
•在不设置高度的情况下，块级元素的高度是它本身内容的高度
•(高度不能继承)
•块级元素是指本身属性为display:block;的元素。
•通常使用块级元素来进行大布局（大结构）的搭建

行级元素

在一行排列, 从左向右

•和其他内联元素从左到右在一行显示
•不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的)
•内联元素的宽高是由本身内容的大小决定（文字、图片等）
•内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
•内联元素是指本身属性为display:inline;的元素。
通常使用行级元素来进行文字、小图标（小结构）的搭建

浮动：

标准文档流：

元素(标签) 根据元素特性(行级,块级, 行内块) 从左向右, 自上而下顺序排列
这就是标准文档流

浮动特性：

1：浮动只影响后面的元素
	因为浮动脱离了标准文档流, 浮动元素本来占据的空间, 就空了出来
	后面的元素,要想复合标准文档流规范, 它就要占据它前面的空间
	所以,浮动影响后面的元素

2：浮动找浮动，不浮动找不浮动

3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换（eg:span 设置浮动可以设置宽高）
5：让块级元素在一行显示

清除浮动：

谁被浮动效果影响了, 那么就在谁之上清除浮动
clear: left;

同时清除左右方向的浮动
clear: both;

撑开和塌陷：

•当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。
•一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。
出现这种情况，我们需要清除浮动

定位：

就是一个html标签所显示在网页上的位置

默认定位：

标准文档流(从左向右, 从上向下)

•Static:元素框正常生成。
默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）

相对定位:

相对于它本来的位置进行定位,   不脱离标准文档流
•Relative:元素框偏移某个距离。
•相对定位的元素，相对于其正常位置进行定位
•并不脱离文档流
注意: 单设置相对定位不会起效果, 要结合方位元素, 才会产生效果

绝对定位：

脱离标准文档流,  元素也需要方位元素配合使用
绝对定位会以边为距离控制

是相对于父元素进行定位的(注意, 这个父元素要么是相对定位,或者是绝对定位)

第一个父元素:   是内层向外层扩展的

当一个绝对定位元素,  的所有父盒子都不设置相对或者绝对定位, 那么该定位元素要以浏览器窗口进行定位 

•Absolute:元素框从文档流完全删除，
•绝对定位绝对不占空间位置（与浮动一样）
•脱离文档
•元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

•生成绝对定位的元素，相对于非 static 定位的第一个父元素进行定位。


•Fixed:绝对定位的元素，相对于浏览器窗口进行定位
生成绝对定位的元素，相对于浏览器窗口进行定位
•z-index:z-index 仅能在定位元素上奏效, Static 无效（例如 position:absolute;）


•一般子元素设置绝对定位，父元素设置相对对定位（子绝父相）,是一种习惯

 

十二分热爱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
CSS笔记——浮动
weixin_44030304的博客
08-06 117
一. 浮动 块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以通过float来使元素浮动，从而脱离文档流 可选值： (1) none: 元素默认在文档流中排列（默认值） (2) left: 元素会立即脱离文档流，向页面的左侧浮动 (3) right: 元素会立即脱离文档流，向页面的右侧浮动 当为一个元素设置浮动以后（float属性是一个非none的值），水平布局的等式便不需要强制成立，元素会立即脱离文档流，不再占用文档流的位置。元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边
浮动带来的影响以及解决方案
m0_46288900的博客
12-23 421
​​​​​​浮动带来的影响 若父元素不设置高，元素浮动之后，它脱离标准流，无法撑开其父元素，产生塌陷 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响 解决方法： 清除浮动的策略是: 闭合浮动(只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子) 1.额外标签法：在浮动元素末尾添加一个空的标签，必须是块级元素，也称为隔墙法 <div style=”clear:both”></div> 2.父级添加 overflow 属性：给父级添加 overfl
css清除浮动(给div设置浮动后导致后面的元素样式错位)
m0_56212431的博客
09-10 1150
1. 为什么要清除浮动？ 一般情况下，我们会设置父级的div高度为0，使其子级div的高度将其撑开。但是当我们设置的子级div浮动时，子级div便脱离于标准流之外，此时会导致父级div的高度依旧是0，影响后面元素的排列，因此需要清除浮动！ 2. 清除浮动的方法 2.1 额外标签法 做法：在最后一个浮动元素之后加上一个空标签比如：\<div>\</div>,然后设置其样式为：clear:both 语法：clear:left|right|both 属性值 说明 left
浮动对后面同级元素的影响
p1967914901的博客
04-13 1336
浮动对后面同级元素的影响 当前三个元素浮动时，会遮盖后面的div的解决办法: **1.**给前三个div增加一个父元素div包裹起来，但是如果父元素没有设置高度，由于里面的子元素都是浮动的，不会把父元素的高度撑起来，这里引进两种方法 第一种是给父元素加一个属性 overflow:auto; overflow表示溢出的意思，可以对超出边界的元素做成调整 第二种是：给后面的元素增加一个属性 cle...
css投影
weixin_41824429的博客
10-08 6682
css投影
CSS表格
m0_57774967的博客
04-24 5598
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS——less
qq_48613863的博客
04-09 8669
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS遮罩层
weixin_44282093的博客
07-19 9305
css遮罩层
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
最新发布
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
LessCSS
07-22
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数...
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
element.css文件
02-27
element.css文件
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：用于指定要应用样式的 HTML 元素。 2. 属性（Property）：用于指定要修改的样式属性，例如颜色、大小、边框等。 3. 值（Value）：用于指定修改后的样式属性值，例如红色、16 像素、实线边框等。 CSS 的样式可以写在 HTML 文档的 `<head>` 标签中，也可以单独存储在一个 CSS 文件中，并通过 `<link>` 标签引用。例如： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Welcome to my website!</h1> <p>This is a paragraph.</p> </body> </html> ``` 上述代码中，我们通过 `<link>` 标签引用了一个名为 `styles.css` 的外部样式表文件。该文件中可以包含一系列 CSS 样式，例如： ```css h1 { color: red; font-size: 24px; } p { color: blue; font-size: 16px; } ``` 上述代码中，我们定义了两个样式，一个用于 `<h1>` 标签，一个用于 `<p>` 标签。其中，`color` 属性用于设置文字颜色，`font-size` 属性用于设置文字大小。 这样，当用户访问我们的网页时，浏览器会自动加载 `styles.css` 文件，并将其中的样式应用到网页中的相应元素上。这样，我们就可以通过 CSS 来控制网页的样式和排版。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值