![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 64
css
-王二毛-
学无止境
展开
-
css重置样式表reset.css和normalize.css
css重置样式表原创 2022-09-04 15:57:52 · 567 阅读 · 0 评论 -
css_水平布局
水平布局元素的水平方向的布局:元素在其父元素中水平方向的位置由以下7个属性共同决定“margin-leftborder-leftpadding- leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中,水平布局必须要满足以下的等式margin-left + border-left + padding-left + width + padding-right + border-right + margin-right =其父元素内原创 2022-03-31 13:27:03 · 568 阅读 · 0 评论 -
垂直方向的布局
垂直方向的布局子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出使用overflow 属性来设置父元素如何处理溢出的子元素可选值:visible,默认值子元素会从父元素中溢出,在父元素外部的位置显示hidden溢出内容将会被裁剪不会显示scroll生成两个滚动条,通过滚动条来查看完整的内容auto根据需要生成滚动条 overflow-x: overflow-y:...原创 2022-03-31 13:26:45 · 84 阅读 · 0 评论 -
CSS_水平垂直居中总结
https://segmentfault.com/a/1190000013966650一、水平居中1.1、行内元素水平居中方式一:父元素设置 text-align: center利用text-align: center可以实现在块级元素内部的行内元素水平居中。此方法对行内元素(inline),行内块(inline-block),行内表(inline-table),inline-flex元素水平居中都有效。<style type="text/css"> div {原创 2022-03-30 10:50:38 · 131 阅读 · 0 评论 -
外边距的折叠
外边距的折叠<style type="text/css"> .box1, .box2 { width: 200px; height: 200px; font-size: 100px; }/* 垂直外边距的重叠(折叠)相邻的垂直方向外边距会发生重叠现象|-兄弟元素 -兄弟元素间的相邻垂直外边距会取两者之间的较大值(都是正值时) -特殊情况: 一正一负取和 相邻的外边距都是负值,取绝对值大的 -父子元素 -父子元素间相邻外边距,子元素的原创 2022-03-30 08:55:32 · 150 阅读 · 0 评论 -
CSS_三栏布局的五种方式&圣杯布局和双飞燕布局
float<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <style type="text/css"> .outer{ min-width:600px; } .side{ width: 300px; height:300px; background-color:#bf原创 2021-05-21 11:02:42 · 488 阅读 · 0 评论 -
CSS_画三角形和梯形
我们的思路是使用border边框来实现三角形的样式,因为border的边框是由四个三角形组成的。设置一个盒子模型<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #sanjiaoxing { width: 40px; height: 40px;原创 2021-05-24 07:16:58 · 137 阅读 · 0 评论 -
CSS_display属性
display设置行标签和块标签所谓行标签和块标签只是display属性的默认值不同而已1、将块级元素修改为行内元素display:inline;2、将行内元素改为块元素display:block;display设置标签的隐藏display:none;display设置行内块元素display:inline-block;...原创 2021-05-13 21:59:42 · 316 阅读 · 0 评论 -
CSS编写位置+单位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 第二种方式(内部样式表),将样式编写到head中的style标签里--> <style> p{ color: green; font-s原创 2021-05-11 18:02:21 · 89 阅读 · 0 评论 -
CSS_布局
12原创 2021-05-11 17:32:25 · 56 阅读 · 0 评论 -
CSS_像素&视口&媒体查询(响应式布局)
完美视口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置视口大小 device-width完美视口--> <meta name="viewport" content="width=device-wi原创 2021-03-24 08:40:22 · 657 阅读 · 0 评论 -
CSS_flex 布局之弹性盒
flex(弹性盒、伸缩盒)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-03-23 16:21:12 · 377 阅读 · 0 评论 -
CSS_变形之平移&旋转&缩放
平移translateX和Y轴平移 transform: translateX(-50%) translateY(-50%);<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color: #dddddd } .原创 2021-03-23 15:59:19 · 605 阅读 · 0 评论 -
CSS_过渡&动画
过渡transition过渡(transition)-通过过渡可以指定一个属性发生变化时的切换方式-通过过渡可以创建些非常好的效果,提升用户的体验<style> div{/*语法:transition:过渡的属性1,属性2,...,属性n 属性1持续时间,属性2持续时间*/transition:height,width 2s,1s;/*分开设置:transition-property: 指定要执行过渡的属性*/transition-property: wid原创 2021-03-23 15:29:17 · 160 阅读 · 0 评论 -
CSS_渐变
线性渐变<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; /* 通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果 ! !渐变是原创 2021-03-19 20:36:34 · 210 阅读 · 0 评论 -
CSS_背景
一、背景颜色background-color设置背景颜色二、背景图片background-image:url("./img/1.png")2.1、background-repeat作用:用来设置背景的重复方式可选值:-repeat默认值,背景会沿着x轴y轴双方向重复-repeat-x沿着x轴方向重复-repeat-y沿着y轴方向重复-no-repeat背景图片不重复2.2、background-position作用:用来设置背景图片的位置设置方式:通过top left right原创 2021-03-19 13:30:02 · 140 阅读 · 0 评论 -
CSS_超链接状态样式切换&雪碧图
a’s’d’fa’s’d原创 2021-03-19 13:29:26 · 378 阅读 · 0 评论 -
CSS_浮动
浮动:可以使块元素水平排列.box5 { width: 100px; height: 100px; background-color: #bfa; /* none默认值,不浮动 left左浮动 right右浮动 注意,元素设置浮动以后,水平布局的等式便不需要强制成立 元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置, 所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点: 1、浮动原创 2021-03-15 13:20:05 · 90 阅读 · 0 评论 -
CSS_图片篇&背景
一、图片大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-03-23 11:33:45 · 991 阅读 · 1 评论 -
CSS_定位position&配合z-index元素层级使用
relative相对定位相对定位参考点时其本身的位置,并且移动后的参考点还是原本的位置<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 60px; } .box1{ width: 200px;原创 2021-03-23 11:21:40 · 563 阅读 · 0 评论 -
CSS_浮动造成的高度塌陷&BFC&clear&clearfix
BFC(Block Formatting Context) 块级格式化环境<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 可以通过一些特殊方式来开启元素的BFC: 1、设置元素的浮动(不推荐) 2、将元素设置为行内块元素(不推荐) 3、将元素的overflow设置为一个非visible的值 -常用原创 2021-03-23 10:05:07 · 237 阅读 · 0 评论 -
CSS_盒子模型
盒模型–css将页面的所有元素都设置为一个矩形的盒子–将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置–每个盒子都由以下几个部分组成–内容区(content)–内边距padding–边框–border–外边框margin<style type="text/css"> .box { /*内容区(content) ,元素中的所有的子元素和文本内容都在内容区中排列内容区的大小由width和height两个属性来设置width设置内容区的宽度hei原创 2021-03-15 09:00:56 · 200 阅读 · 0 评论 -
CSS_样式选择器
网页分成三个部分结构HTML表现css行为javascriptcss层叠样式表内联样式表内部样式表外部样式表<!--引入外部样式表--><link rel="stylesheet" href="url"/>css基本语法选择器+声明块p{color:red;font-size:40px]常用选择器元素选择器,pid选择器#byidclass(类)选择器**.**byclass符合选择器交集选择器div.red交集选择器作用:选中同时复合原创 2021-03-14 14:35:00 · 1069 阅读 · 0 评论