CSS(level 1)
文章平均质量分 71
CSS 顶级专栏
谁诉离殇~
菜鸟前端,学习笔记
展开
-
-浏览器渲染
这个实际上只需要掌握reflow和repaint就好了浏览器如何渲染页面浏览器解析1、浏览器通过请求的 URL 进行域名解析,向服务器发起请求,接收文件(HTML、CSS、JS、Images等等)。2、HTML 文件加载后,开始构建 DOM Tree3、CSS 样式文件加载后,开始解析和构建 CSS Rule Tree4、Javascript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tr..原创 2022-02-14 10:48:53 · 382 阅读 · 0 评论 -
-表格和表单
一、表格(1)定义表格(2)标签:<table> 定义 HTML 表格<thead> 标签定义表格的表头<tbody> 标签表格主体(正文)<tfoot> 标签定义表格的页脚(脚注或表注)// 代码中需要在之前<tr> 元素定义表格行<th> 元素定义表头<td> 元素定义表格单元<caption> 元素定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题,.原创 2022-02-14 10:48:22 · 376 阅读 · 0 评论 -
-背景图片设置
一、背景图片设置1、设置方式有下载需求的图片采用 img 标签实现(方便用户下载),无下载需求的图片采用 CSS 背景图实现下载需求:比如产品 logo、用户头像、用户产生的图片等无下载需求:比如icon、背景、代码使用的图片2、图片的srcimg 的 src必须要有个值。延迟加载的图片也要增加默认的 src。src 取值为空,会导致部分浏览器重新加载一次当前页面3、图片的alt为重要图片添加 alt 属性,提高图片加载失败时的用户体验4、图片的width 和 he.原创 2022-02-14 10:47:29 · 559 阅读 · 0 评论 -
-百分比设置margin和padding,line-height,height
用百分数设置margin和padding用百分数设置margin和paddding的时候,其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49;为什么都是以宽度为标准1、高度持续增加第一种说法是,padding-top如果以容器高度为参照,那么子元素应用padding值将会继续加高容器的高度,容器.原创 2022-02-14 10:46:58 · 959 阅读 · 1 评论 -
-css杂
(1)设置logo: 用一个<a href="#"><img src="" alt=""></a> 对于可能有下载需求的图片,都用img来实现(2)css中颜色命名方法: 命名颜色:color:gray; RGB颜色:color:rgb(0,125,246); 十六进制颜色:color:#cccccc; 短十六进制颜色:color:#fff;(3)子元素选择器:> 选择元素的直接的目标子元素,不是选择所有的子元素 &...原创 2022-02-14 10:46:25 · 83 阅读 · 0 评论 -
-css实现一些效果(d)
一、伸缩相册[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G00oc7sM-1644806740585)(F:/markdown专用/伸缩相册.jpg)]效果描述:点击图片2,然后图片2变大,把后面的图片往后面挤,图片6变小;再点击图片3,图片3往左移变大,图片2变小。实现描述:用label来绑定input,然后点击label之后,改变它后面所有label的位置。.box label{ width:300px; height:400px; border:原创 2022-02-14 10:45:51 · 163 阅读 · 0 评论 -
-Border属性制作三角&&斜线
注2: 做三角一般就用下面第一个方法就好了,四条边都加上border用border属性制造图形(三角、梯形等)和斜线(1)四条边都加上border,来画三角(最常用):这样画的三角,是四个完全一样的三角;实际操作如下首先把这个元素的width和height都设置为0,overflow设置为hidden,图像就不会被拉伸变形,中间也就不会出现空白,也不会显示元素里面的任何内容;简单说就是让元素只显示border然后 给四个方向的border都加上一个宽度,让四个方向都由border填充最..原创 2022-02-14 10:45:17 · 954 阅读 · 0 评论 -
-左中右三栏布局(p m)
引言:布局是页面中的一个很重要的东西,这篇文章主要讨论与浮动有关的左中右三栏布局。一、基础的左中右三栏布局这个布局呢,就是由三个部分组成:左右放在前面,而主内容放在后面。一个左浮动,一个右浮动,都设置固定宽度,主内容区宽度自适应,只需要设置margin和前面两个块隔开就好。如下:.wrap { width: 80%; margin: 0 auto;}.left { float: left; width: 200px; height: 200px; background原创 2021-11-15 09:43:34 · 863 阅读 · 0 评论 -
网格布局(Grid)
网格布局(Grid)一、网格布局(Grid)是什么网格布局(Grid)是最强大的 CSS 布局方案;它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。Grid 布局与 Flex 布局:可以把grid布局和flex布局配合起来用相似点:Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置不同点:Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid布局原创 2021-10-12 22:33:52 · 1513 阅读 · 0 评论 -
-模块化布局方法(d)
模块化布局方法:1、先写出整体的框架(即页面的基本骨架)。在设计图上小块小块的看,写出大体的页面有哪些块。然后感觉样式相同的块,就给它们一个相同的class。如: <header></header> <nav></nav> <div class="search"></div> <div class="content"> // 内容区分为两个部分,左边一个主内容区,右边一个侧边栏原创 2021-10-12 22:33:21 · 279 阅读 · 0 评论 -
-弹性盒模型flex(d)
flex语法一、Flex布局是什么注:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。如:.box{ display: flex;}行内元素也可以使用 Flex 布局。如:.box{ display: inline-flex;}兼容性:ie9及以下版本不支持flexbox。自动.原创 2021-10-12 22:32:51 · 270 阅读 · 0 评论 -
-8、布局
一、浮动布局(1)两列布局:一个包含块包含两个部分。一个部分向左浮动,一个部分向右浮动,创建隔离带。或者两个都向左浮动,用外边距或者内边距创建隔离带。实现这个布局非常简单,只需要为每个列设置想要的宽度,然后将次要内容左浮动,主要内容右浮动。包含的两个块命名可以直接简单的命名,如: 命名为primary和secondary而不需要命名为primary-content和secondary-content实例: <div class="content"><.原创 2021-10-12 22:30:50 · 73 阅读 · 0 评论 -
-响应式(d)
三、响应式一个网站能够兼容多个终端,并且在各个终端都可以有很好的展示体验,即可能不同的终端需要有不同的展示效果.1、在css文件内部通过媒体查询运用样式媒体查询即@media指令,只有符合定义条件的才会被应用到网页。一般添加到样式表的末尾。// screen指的是计算机屏幕;and后面是筛选条件,可以有多个;// 而且可以用","来分开多个媒体查询,只要一个媒体查询表达式为真,则就会应用样式// screen可以省略,如果不写的话默认就为all@media screen and (mi原创 2021-10-12 22:29:44 · 101 阅读 · 0 评论 -
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽。另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available、fit-content、max-content、min-content一、rem1、使用js来使rem自适应最新领悟重点,关于设计图和量出来的值使用rem:重点为根元素的像素值。我们在js里面把根元素的像素值用读取的屏幕宽度(当然写代码的时候肯定屏幕宽度和设计图宽度一样)除以设计图宽度,即$("html.原创 2021-10-12 22:28:59 · 570 阅读 · 0 评论 -
-css3一些新选择器(d)
由于css特性太多,所以与其企图知道所有的css特性,不如让自己知道可以用什么css实现什么更好。一、多列布局columnscss多列布局规范描述了如何通过多列显示文本(即,如果不用这个属性的话,文本一般都是一大块,而用了这个可以给将文本设置为小块小块的)。下面是常用的5个属性:column-width:<length> | auto 设置或检索对象每列的宽度 .column-count:<integer> | auto 设置或检索对象的列数.column-gap.原创 2021-10-12 22:28:26 · 95 阅读 · 0 评论 -
-css3新增属性和css中一些属性(d)
一、新增属性1、rgba()opacity(不透明度) 属性: 设置元素的不透明级别。从 0.0 (完全透明)到 1.0(完全不透明)。兼容性:所有浏览器都支持 opacity 属性。IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。rgba: 同时设置颜色和不透明度。RGB即是代表红、绿、蓝。 a代表 alpha.用法:在background中设置前三个参数代表rgb值,第四个参数代表不透明度。所有浏览器都支持rgba属性。IE8不支原创 2021-10-12 22:27:52 · 319 阅读 · 0 评论 -
-css3高级技术(p)
layout: posttitle: “CSS3高级技术”categories: csstags: css3excerpt: 这篇文章是写一些css3常用的高级特性的,很好用对于这些css3属性,在用百分数设置值的时候,都是相对于元素自身的宽高设置的一、box-shadow(是给元素块添加周边阴影效果影)投影box-shadow的原理是:在元素的原位置模一个和原元素一样大的阴影,然后再为这个阴影设置其他一些东西。(1)浏览器支持: IE9+、Firefox 4、Chrome、Op.原创 2021-10-12 22:27:00 · 386 阅读 · 0 评论