Html/CSS
文章平均质量分 89
木森林哥哥
学习是一种信仰!
展开
-
一篇博客搞定移动端布局
指屏幕在:横向、纵向上所拥有的**物理像素点**总数。一般用 n * m 表示。 例如:iPhone 6 的屏幕分辨率为 750 * 1334- 注意点: - **屏幕分辨率是一个固定值,屏幕生产出来就确定了,无法修改!!** - 屏幕分辨率、显示分辨率是两个概念,系统设置中可以修改的是:显示分辨率。 - 显示分辨率是设备当前所用到的物理像素点数,也可以说:屏幕分辨率 >= 显示分辨率原创 2022-11-12 15:24:31 · 1410 阅读 · 1 评论 -
前端 HTML/CSS (十七 总结)
目录弹性元素排序收缩因子BFC水平、垂直居中的总结总结:弹性元素排序order默认的时候,弹性元素的显示和排序顺序是与在源码中的顺序一致的,如果更改需要使用order属性。格式:order:value,用于弹性元素,默认情况下所有弹性元素的顺序都是0。修改弹性元素的视觉顺序,可以将order设置为一个非零的整数(正数、负数)数越大在主轴上面越靠后。如果数值相同它们会被分配在同一个排序组中,以出现在源码中的顺序沿着主轴方向显示。注意:使用order时只是视觉上的变化,就像在源码中的顺序发生了修改原创 2021-01-11 23:36:17 · 279 阅读 · 0 评论 -
前端 HTML/CSS (十六)
目录flex设置弹性元素如何在垂直轴上进行分布设置整个弹性元素如何对齐。弹性增长因子flex主轴、垂直轴flex-directionflex-wrapjustify-content设置弹性元素如何在垂直轴上进行分布align-items定义的是弹性元素在垂直方向上的对齐方式。(设置弹性元素在当前行的位置分布)。flex-start,将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。flex-end,将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。center,弹性元素的中点与所原创 2021-01-11 23:23:00 · 137 阅读 · 0 评论 -
前端 HTML/CSS 基础知识汇总
前端 HTML/CSS(一)前端 HTML/CSS(二)前端 HTML/CSS(三)前端 HTML/CSS(四)前端 HTML/CSS(五)前端 HTML/CSS(六)前端 HTML/CSS(七)前端 HTML/CSS(八)前端 HTML/CSS(九)前端 HTML/CSS(十)前端 HTML/CSS(十一)前端 HTML/CSS(十二)前端 HTML/CSS(十三)前端 HTML/CSS(十四)前端 HTML/CSS(..原创 2021-01-07 13:00:43 · 311 阅读 · 0 评论 -
前端 HTML/CSS (十五)
前端 HTML/CSS (十五)过渡的时候不要用 auto 这个值。display: none之后马上使用过渡是不好使的,因为会被当做没有开始状态,直接就到了结束状态。边框折叠只存在于块状元素中,当边框折叠时也可以把元素转换为行内块元素来解决。动画过渡是在状态发生变化时把一个属性的值从一个规则设定的值改变为另外一个规则中设定的值。这个变化是在一段时间完成的不是瞬间变化的。过渡需要触发(如hover上去后)才能变化,而动画不需要。CSS动画和过渡的相同点就是都在一段时间内发生变化,不同原创 2021-01-07 11:46:06 · 1072 阅读 · 0 评论 -
前端 HTML/CSS (十三)
前端 HTML/CSS (十三)background-origin,背景定位基准背景裁剪用来控制背景延伸到哪里,background-origin用来控制background-position相对于哪里来进行定位。默认的时候background-position定位相对于元素内边距的外边界来进行定位。padding-box,默认值。背景图像的左上角被放在内边距外边界(左上角)。border-box,背景的图像左上角被放在边框的外边界(左上角)。content-box,背景的图像左上角被放在内容原创 2021-01-07 11:24:23 · 170 阅读 · 0 评论 -
前端 HTML/CSS (十四)
前端 HTML/CSS (十四)关于渐变background-image: linear-gradient(90deg,yellow 0%,yellow 50%,transparent 50%),linear-gradient(75deg,red 0%,red 50%,transparent 50%);通过如上代码,可以分析出来。background-image中可以使用多个渐变效果。如果使用多个渐变效果,先写的将会压住后写的。从PSD设计稿中获得渐变值选择移动工具选中自动选择原创 2021-01-07 11:30:48 · 175 阅读 · 0 评论 -
HTML/CSS 三个小盒子在一个大盒子中水平居中
HTML/CSS 三个小盒子在一个大盒子中水平居中方法一:把子盒子变成行内块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .big { width: 600px; height: 600px原创 2021-01-05 19:37:30 · 10727 阅读 · 3 评论 -
前端 HTML/CSS (十二)
UI状态伪类选择器E:checked,选择匹配的E元素并且E元素被选择上(用在单选和多选)。checked要选择才能触发,并不是一开始就触发。伪元素选择器E::before,选择匹配的E元素,并且在匹配的元素的所有子元素的前面插入内容。E::after,选择匹配的E元素,并且在匹配的元素的所有子元素的后面插入内容。在使用before和after时一定要配合着content属性来使用。content属性的值为要插入的内容。伪元素插入的内容在页面中是无法被选中的。插入生成的内容基础原创 2021-01-01 21:48:25 · 123 阅读 · 0 评论 -
前端 HTML/CSS (十一)
固定定位fixed,固定定位的元素也会从文档流中删除,相对于视口来进行定位。opacity属性,它指定了一个元素的透明度,当这个属性被应用到元素上时,是把这个元素整个(内容、背景色、前景色、边框)进行透明。opacity的值也是从0~1的范围,0为完全透明,1为完全不透明。visibility设置元素是否可见:visible,元素可见hidden,元素不可见,但是对于页面的布局依然会有影响。display: none; 和 visibility: hidden; 的区别:displ原创 2021-01-01 21:42:55 · 240 阅读 · 0 评论 -
前端 HTML/CSS (十)
我们说float是半脱离文档流(块状元素重叠,行内元素不重叠)。定位是指元素移动到哪里,允许元素相对于某个基准进行移动。普通文档流、浮动(半脱离文档流)、定位(脱离文档流)格式:position: valuestatic,默认值,正常的生成元素框,块级元素生成矩形框、行内元素生成一个或多个行框。relative,相对定位。相对于元素自身的本来的位置进行定位。可以使用top、bottom、left、right来移动元素。值如果是正数那么向它所在的反方向在走,负数是向它自己的方向在走。原创 2021-01-01 21:26:19 · 120 阅读 · 0 评论 -
前端 HTML/CSS (九)
浮动设计的初衷:实现文字环绕效果。原理:父类高度塌陷,让跟随的内容可以和浮动的元素在一条线上。块状盒子会和浮动元素重叠,但是块状元素中的行框盒子不会和浮动元素重叠。规则:考虑前面的元素。只要是浮动的元素就会变成块状元素。子元素浮动将会导致父元素高度塌陷。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <style> div{原创 2021-01-01 21:07:24 · 212 阅读 · 0 评论 -
前端 HTML/CSS (八)
表格表格的处理方式和其他的元素稍微有些不同:不管单元格中的内容有多少,一行中的所有单元格都具有相同的高度。在同一列中,不管单元格内容是多少,一列中的所有单元格都具有相同的宽度。表格标题表格标题可以从表格上继承样式,可以设置内边距、边框、背景。表格标题的宽度由表格决定。表格元素是标题的容纳块。caption-side:value,用来设置表格标题的位置。top,放在表格上面(caption-side: top;默认值)。bottom,放在表格下面。注意:caption-side:原创 2021-01-01 20:37:48 · 140 阅读 · 0 评论 -
前端 HTML/CSS (七)
背景颜色元素的默认背景色都是透明的(包括HTML和body的),transparent。body和html都不是整个的页面,body由内容撑开,html由body撑开。给body上设置背景颜色整个页面的背景颜色都改变。给html上设置背景颜色,同时再给body上设置颜色则使用html的颜色。整个页面的层次body->html->页面画布最终整体的背景颜色由页面画布决定(所有的内容都是在页面画布上面渲染出来的。)画布颜色决定的规则:有html的颜色就用html的颜色,html没有颜原创 2021-01-01 20:14:46 · 155 阅读 · 0 评论 -
前端 HTML/CSS (六)
问题:做功能,需求。课上讲的知识,你得有体系。你在看的时候。别钻牛角尖。元素框文档中的每个标签都会生成一个矩形框。这个框描述标签在文档布局中所占的空间。默认的时候渲染出来的元素不会出现重叠,但是如果元素是手动定位的可能会出现重叠。虽然CSS可以做成三角形、圆形等,其实所有CSS最初生成的框都是矩形框。整体结构内容区域:用来存储内容。宽度:用来定义内容区的宽度。高度:用来定义内容区的高度。内边距:用来定义内容区域和边框的距离。边框:是围绕内容区域和内边距的一条原创 2021-01-01 19:43:57 · 261 阅读 · 0 评论 -
前端 HTML/CSS (五)
文本缩进格式:text-indent:valuepx,像素。em,1 em=1个设置的大小。注意:如果要缩进只能应用到块级元素上。行内元素不行。文本缩进只会影响第一行,即使有多行也是如此。换行white-space,用来处理元素内文本是否允许换行。normal,默认值。CJK(中日韩)文本遇到容器边界会自动换行,非CJK文本由word-break的值来决定。nowrap,对长行不进行换行。word-break,用来标明怎么样进行单词的断句。none,根据浏览原创 2020-12-25 20:16:17 · 193 阅读 · 0 评论 -
前端 HTML/CSS (四)
CSS的使用方式内联方式<标签名 style=""></标签名>特点:仅作用于本标签。内嵌方式<style type="text/css">选择器{ 属性1:值1; ..... 属性n:值n;}</style>特点:作用于当前整个页面。MIME类型:它用来表示的就是要处理的文件的类型。外部导入<link />用来导入CSS文件(将其他的文档与当前的文档关联起来)通过link链接的样式原创 2020-12-25 20:03:22 · 331 阅读 · 0 评论 -
前端 HTML/CSS (三)
表格<td>上面的属性:colspan:规定单元格可以横跨的列数。rowspan:规定单元格可以竖跨的行数。内框架<iframe>标签,创建包含另外一个文档的内联框架。src:载入框架时候要载入的文档的地址。width属性:设置iframe的宽度。height属性:设置iframe的高度。frameborder属性:规定是否显示边框,1为显示,0为不显示。name属性:规定这个iframe的名字,配合a标签的target使用。<iframe>原创 2020-12-25 19:37:09 · 314 阅读 · 1 评论 -
CSS 行内、行内块元素空白间隙解决方案
1. 行内块元素 img 图片空白代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-12-21 16:53:36 · 1435 阅读 · 0 评论 -
前端 HTML/CSS (二)
字符集和编码ASCII -》 ANSI(GBK、GB2312) -》Unicode(UTF-8、UTF-16)meta标签更改字符集,规定让浏览器以什么字符集来进行解释这个页面。<meta charset="编码" />其他用法<meta name="" conten="" />name属性里面的值是规定好的:keywords:指定网页的关键字。description:指定网页的描述。content里面的值根据name属性的值来写(自定义的内容)原创 2020-12-20 14:25:13 · 230 阅读 · 1 评论 -
前端 HTML/CSS(一)
web网站:多个网页组合起来形成了一个网站。无数个网站和网页的集合我们叫万维网,它的外国名字world wide web 也简称3w或www。前端前端好比电视、后端好比电视台。网络软件的组成客户端、服务器端客户端:用来发起请求,接收服务器端法来的消息。在web里面指的浏览器。服务器端:接口客户端发来的请求,并且给出回应。网络软件的类型client 客户端 Server 服务器端 C/Sbrowser 浏览器 Server服务器端 B/S组成客户端:浏览器,用来发起请求原创 2020-12-16 15:15:20 · 478 阅读 · 0 评论 -
font-family:常用中文字体的英文名称 (宋体 微软雅黑)
常用中文字体的英文名称 (宋体 微软雅黑)宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312宋体:SimSuncss中中文字体(font-family)的英文名称Mac OS的一些:原创 2020-12-06 23:04:17 · 13282 阅读 · 0 评论 -
label标签
label标签目标:label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。概念:label 标签为 input 元素定义标注(标签)。作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。如何绑定元素呢?第一种用法就是用label直接包括input表单。<label> 用户名: <input type="text" name="usename" value="请输入用户名"> </label&g.原创 2020-12-05 16:24:59 · 3928 阅读 · 1 评论 -
HTML 表格
目录1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@1. 创建表格在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法:<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>原创 2020-12-04 00:18:18 · 10118 阅读 · 2 评论 -
锚点定位
锚点定位通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系) 我也有一个姓毕的姥爷.. <a href="#two"> 快速记忆法:好比找个人办事, 首先找到他,然后拉关系,最后看效果。效果显示:.原创 2020-12-03 00:56:47 · 1587 阅读 · 0 评论 -
超链接标签(重点)
超链接标签(重点)单词缩写: anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。语法格式:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>属性作用href用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能target用于指定链接页面的打开方式,其取值有_self和_blank两种,其原创 2020-12-02 00:41:16 · 899 阅读 · 0 评论 -
CSS属性的注意事项
属性的注意事项标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。采取 键值对 的格式 key=“value” 的格式...原创 2020-12-02 00:33:37 · 248 阅读 · 0 评论 -
HTML CSS 代码书写规范
一、html规范1. 块级元素div、h1~h6、address、blockquote、center、div、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul …特点:总是在新行上开始,高度、行高以及顶和底边距都可控制,宽度缺省是它的容器的100%,除非设定一个宽度功能:主要用来搭建网站架构、页面布局、承载内容2. 行内元素span、a、abbr、acronym、b、bdo、big、br、原创 2020-11-28 16:25:49 · 353 阅读 · 0 评论 -
CSS 盒子居中详解
我们在做web练习或项目的时候,经常会碰到盒子居中问题,今天给大家总结了几种方法,希望能有所帮助!居中目录1. 内容水平居中2. 一行文字垂直居中3. 盒子水平居中4. 子元素在父元素中居中4.1 子元素在父元素中居中-弹性盒子4.2 子元素在父元素中居中-table-cell4.3 子元素在父元素中居中-绝对定位1. 内容水平居中text-align: center代码:<!DOCTYPE html><html lang="en"><head> .原创 2020-11-27 20:13:19 · 6172 阅读 · 0 评论 -
display属性详解
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。块元素与行元素是可以转换的,也就是说display的属性值可以由我们来改变。display常用属性值1. none:隐藏对象2. inline: 指定对象为行内元素3. block: 指定对象为块元素4. inline-bl.原创 2020-11-26 21:44:14 · 64164 阅读 · 8 评论 -
HTML、CSS基础知识笔记
构造函数在es6之前是没有“类”的概念的。格式化VS CODE 文档:shift + alt +fcss hover 如果给a元素,那么只有在a里面的才能被选取,如果给外面的元素像div,ul li 这样就是在元素外部也能被选取。行内元素不支持直接设置宽、高。不换行,溢出的字以省略号表示:width:多少px自己决定;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;注:ellipsis : 当对象内文本溢出原创 2020-11-26 01:43:55 · 1010 阅读 · 0 评论 -
自学前端需要达到什么水平才能去找工作?来看看这套前端学习路线图!!!
前端学习路线一图搞定1. 包含了从入门到入土的学习过程和学习路线。2. 包含先学什么后学什么,哪些是重点哪些是最常考的面试题。3. 自带超链接,可以点击学习路线,全程免费!4. 资料已经准备好了,请君入学吧!!!点我看原图!...原创 2020-11-19 21:45:05 · 238 阅读 · 0 评论 -
CSS 必背基础词汇(手打总结)
目录1. 字体2. 背景3. 区块4. 方框1. 字体font-family 字体font-size 字体大小Font-style 字体样式Italic 斜体Oblique 偏斜体。Line-height 行间距Font-weight 字体粗细Font-variant 字体变形Lowercase 小写字母Text-decoration 文本修饰Underline 下划线Overline 上划线Line-through 删除线Blink 闪烁none 无2. 背景Back原创 2020-11-19 21:17:36 · 1258 阅读 · 0 评论 -
CSS 清除浮动
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。首先,这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。下面我就讲3种常用清除浮动的方法,够用了。文章目录1、在浮动元素后面加一个空的div,并为它清除浮动2、利用BFC特性清除浮动3、使用:after伪元素,给浮动元素的父元素清除浮动1、在浮动元素后面加一个空的div,并为它清除浮动html代码:<div class="wrap"> <div cla原创 2020-11-03 20:02:55 · 1736 阅读 · 1 评论 -
HTML 具体是用来做什么的?
HTML 是什么?1. HTML 是超文本标记语言(HyperText Mark-up Language)2. HTML 是用来设计网页的标记语言3. 用该语言编写的文件,以 .html 或 .htm 为后缀4. HTML 编写的文件由浏览器解析执行5. HTML 不区分大小写,建议小写...原创 2020-11-01 19:03:06 · 6144 阅读 · 0 评论 -
单标签 meta 的属性
目录介绍示例设置关键字指定网页的描述介绍HTML <meta> 元素表示那些不能由其它 HTML 元相关(meta-related)元素((<base>、<link>, <script>、<style> 或 <title>)之一表示的任何元数据信息。注意: 全局属性 name 在 元素中具有特殊的语义;另外, 在同一个 标签中,name, http-equiv 或者 charset 三者中任何一个属性存在时,itemprop原创 2020-10-31 16:10:51 · 328 阅读 · 0 评论 -
计算机单词正确的打开方式是怎样的?
前后端单词 15 implement [ˈɪmplɪment , ˈɪmplɪmənt] 工具原创 2020-10-27 16:21:31 · 202 阅读 · 0 评论 -
前端必备网站(纯手工输入)
首推B站(没有你学不会的技术,无广告,全免费)https://www.bilibili.com/MDN JS 学习(最爱的前端网站)https://developer.mozilla.org/zh-CN/docs/learn/JavaScript印记中文https://docschina.org/Stack Overflowhttps://insights.stackoverflow.com/trends消除图片中的背景https://www.remove.bg/zh...原创 2020-12-05 16:10:41 · 11813 阅读 · 16 评论 -
HTML 5 Canvas 注意事项
什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。注意事项标签需要闭合不同于 元素, 元素需要有闭合标签 ().设置画布(canvas)的大小直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸,这将改变一个画布的水平像素和垂直像素数,就像定义了一张图片的大小一样。可以使用CSS的w原创 2020-10-08 19:19:36 · 239 阅读 · 0 评论