CSS
关注
分享
扫一扫
文章平均质量分 56
花里梦雨
心之所向，素履以往。
展开
-
CSS语法——选择器
基本语法1.选择器和声明块2.选择器1.元素选择器2.id选择器3.类选择器4.通配选择器5.复合选择器交集选择器并集选择器1.选择器和声明块选择器：选中页面中的指定元素（比如p、h1等）声明块：指定为元素设置的样式（color、fint-size等）声明是一个名值对结构一个样式对应一个样式值名明和值之间以:连接，以;结尾i 选择器{ 声明块 }2.选择器1.元素选择器根据标签名来选中指定元素： p{ color:forestgreen;原创 2022-05-12 21:22:07 · 1000 阅读 · 0 评论 -
图标文字的下载和使用（iconfont）
下载——传送门解压后将文件夹中的css和webfonts这两个文件夹移到自己的项目里（且这两个文件夹最好党在同一级目录下）插入图像文字的三种方法① 直接通过类名来使用，其中类名fas或fab部分是固定的，后边跟的fa--bell是具体使用的图标<span class="fas fa-bell"></span>② 使用实体：&#x ____;<span class="fas"></span>③ 使用伪元素.原创 2022-01-27 23:01:10 · 1119 阅读 · 2 评论 -
用CSS呈现轮播图效果
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../reset.css"> <meta charset="UTF-8"> <title>轮播图</title> <style> .box1{ width: 132px; heigh原创 2022-01-27 20:51:45 · 1027 阅读 · 0 评论 -
CSS中的四种定位方式详细整理（position）
目录一、position的可选值二、相对定位：`position:relative`三、绝对定位：`positon:absulote`三、固定定位：`position:fixed`四、粘滞定位：`position:sticky`原创 2021-12-31 14:41:36 · 1783 阅读 · 0 评论 -
CSS中的外边距折叠问题及其4种解决方法总结（完整版）
外边距折叠一、概念二、兄弟元素三、父子元素一、概念一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。二、兄弟元素box2是box1的兄弟元素当两者都是正值时：取二者之间的最大值 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bott原创 2021-12-30 23:11:11 · 3362 阅读 · 0 评论 -
float产生的高度塌陷问题解决方案（包含全部方法)
一、什么是高度塌陷高度塌陷问题是f元素loat后很容易产生的一种现象，具体原因是：在设计网页时，父元素的高度一般不会被写死，我们希望它会根据子元素的内容多少自动变化。但是在浮动布局中，父元素的内容高度默认是被子元素撑开的，但子元素浮动后，便脱离了文档流，因此无法撑起父元素，从而导致父元素高度丢失。之后父元素下边的元素会自动上移，导致页面布局混乱。二、解决方法把父元素高度写死（闭环了属于是）推荐指数：0BFC（Block Foematting Content）：块级格式化环境clear：清除浮原创 2021-12-29 21:11:07 · 2791 阅读 · 0 评论 -
用CSS实现简单的网页布局
用代码实现这样一个简单的网页布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <title>Surymy</title> <style> header,main,footer{原创 2021-12-29 17:11:08 · 1171 阅读 · 0 评论 -
CSS——浮动（float）
一、float的概念：通过浮动可以使一个元素向其父元素的左侧或右侧移动二、float 可选值：-float:none：默认值，无浮动效果-float:left：向左浮动-float:right：向右浮动三、浮动的特点① 当元素设置float之后，便相当于从 文档流中脱离出来（什么是文档流——传送门），也就是说元素在文档流中的特点都将不存在。具体指的是：水平方向的等式不需要强制相等块元素： 不再独占一行、默认高度和宽度被内容撑开行内元素：同块元素也就是不再区分块元素和行内元素，天下大同了原创 2021-12-29 11:40:05 · 412 阅读 · 0 评论 -
盒子尺寸、轮廓和圆角
一、盒子尺寸盒子模型可见宽一般是由内容区+内边距+边框共同决定的，比如下边这里例子： <style> .box1{ height:100px; width:100px; background-color:#bfa; border:10px red solid; padding:20px } </style>原创 2021-12-28 23:45:18 · 1154 阅读 · 0 评论 -
行内元素的盒子模型
1. 行内元素：不支持设置高度（height）、宽度（width），大小由内容决定；内边距 （padding）、边框（border）、外边距（margin）可以生效，但在垂直方向不影响布局2. display：用来设置元素显示的类型display:inline：设为行内元素display:block：设为块元素display:inline-block：设为行内块元素（既可以设置宽高、又不独占一行）display:none：元素不在页面中显示，且不占据位置3. visibility：用原创 2021-12-28 23:19:48 · 459 阅读 · 0 评论 -
CSS——水平布局和垂直布局
水平布局子元素在其父元素中水平方向的位置由以下几个属性共同决定：为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width<head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;原创 2021-11-17 17:50:27 · 4035 阅读 · 0 评论 -
CSS——盒子模型
盒子模型CSS将界面中所有的元素都设置为一个矩形的盒子，每个盒子由以下几部分组成：内容区：元素的所有子元素+文本内容-width/height是用来设置内容区的大小的内边距：内容区和边框的距离边框：盒子的边缘，会影响盒子的大小外边距：确定盒子的位置一、边框（border）简写语法一：border(border-width border-color border-style)比如：border(10px orange solid)。每个属性之间用空格隔开，不分先后顺序。简写语法二：bor原创 2021-11-16 16:53:37 · 874 阅读 · 0 评论 -
CSS——颜色单位
在CSS中用颜色名来设置各种颜色，比如red，blue，yellow等。但也存在一个问题，我们不可能把所有的颜色名字都记下来，导致这样直接使用非常不方便。所以我们来介绍两种颜色变式方法：RGB值：通过三种颜色的不同浓度来调配不ongoing的颜色语法：rgb(红色， 绿色， 蓝色)，其中三个参数值得范围都是0 ~ 255（用百分比内部来表示就是0% ~ 100%，但用的不多）特殊值：由于RGB颜色表示采用的是光的三原色，所以有两个特殊值：rgb(0, 0, 0)和rgb(255, 255, 255)原创 2021-11-16 10:27:36 · 615 阅读 · 0 评论 -
CSS——四种单位长度
长度单位像素不同屏幕的像素大小是不同的，像素越小屏幕显示的效果越清晰所以同样的200px在不同的设备下显示的效果不一样百分比：百分比可以设置属性相对于其父元素属性的百分比<style> .one{ width:200px; height:200px; background-color:black; } p{ width:50%;原创 2021-11-05 23:11:45 · 184 阅读 · 0 评论 -
CSS——选择器的优先级
选择器的优先级当我们通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定：内联样式 1 0 0 0id选择器 0 1 0 0 类和伪类选择器 0 0 1 0元素选择器 0 0 0 1统配选择器 0 0 0 0继承的样式 没有优先级注意：比较优先级时，需要将所有选择器的优先级进行相加计算最后数值越大，则越优先显示（分组选择器要单独计算）选原创 2021-11-04 22:08:13 · 277 阅读 · 0 评论 -
CSS——继承
样式继承定义：我们为一个元素设置的样式同时也会应用到他的后代上，发生在祖先元素和后代之间的目的：为了方便开发，利用继承将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式注意：并不是所有的样式都会被继承。比如背景相关的、布局相关的等都不会被继承 p{ background-color:pink } div{ color:green } <p>原创 2021-11-03 22:56:17 · 198 阅读 · 0 评论 -
CSS——伪元素
伪元素定义：表示页面中一些特殊的并不真实存在的元素（特殊的位置）特点：一般都使用::开头内容::first-letter 表示第一个元素::first-line 表示第一行::selection 表示选中的内容::before 表示元素的开始::after 表示元素的左后-before和after必须结合content使用 p::first-letter{ font-size:50px; } p::first-line原创 2021-11-02 11:09:14 · 159 阅读 · 0 评论 -
CSS——超链接的伪类
为超链接不同的状态设置不同的样式仅a元素使用:link 未访问的超链接，可设置颜色、字体大小:visited 已访问的超链接，可设置颜色，但不可以设置字体大小所有元素都可以使用：:hover 鼠标移入时状态变化:active 鼠标点击（但未松开）时状态变化原创 2021-11-01 17:49:12 · 3215 阅读 · 0 评论 -
CSS——伪类选择器
伪类选择器1.定义：用来描述一个元素的特殊状态的一种不存在的选择器或特殊的选择器2.特点：一般情况下都用:开头3.类别：① 根据所有的子元素排序:first-child 第一个子元素:last-child 最后一个子元素:nth-child()-特殊值：n：选中0到正无穷范围内的所有子元素2n或even：偶数位元素2n+1或odd：奇数位元素 ul>li:first-child{ color:red } ul>原创 2021-11-01 17:08:51 · 988 阅读 · 0 评论 -
CSS语法——基本选择器
基本语法1.选择器和声明块2.选择器1.元素选择器2.id选择器3.类选择器4.通配选择器5.复合选择器交集选择器并集选择器1.选择器和声明块选择器：选中页面中的指定元素（比如p、h1等）声明块：指定为元素设置的样式（color、fint-size等）声明是一个名值对结构一个样式对应一个样式值名明和值之间以:连接，以;结尾i 选择器{ 声明块 }2.选择器1.元素选择器根据标签名来选中指定元素： p{ color:forestgreen;原创 2021-10-27 11:15:53 · 896 阅读 · 0 评论 -
CSS——层叠样式表
网页是一个多层的结构，CSS来设置网页中元素的样式，方法有三种： 1.内联样式表2.内部样式表3.外部样式表1.内联样式表 <p style="color:rgb(211, 32, 142); font-size:20px">花朵</p>属于行内样式，只能对一个标签生效；问题：当样式发生变化时，需要逐个改动，不方便维护。开发时绝对不要使用内联样式！！！2.内部样式表将样式编写到head标签中的style标签里：<head> <styl原创 2021-10-26 20:24:05 · 279 阅读 · 0 评论