![](https://img-blog.csdnimg.cn/20210211121254493.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML + CSS
城阙辅三秦,风烟望五津
ParadoxLin
种一棵树最好的时间是十年前,其次是现在。
展开
-
CSS13_由html{height: 100%} 引发的CSS百分比宽高度的思考
html {height: 100%},其高度是浏览器给的原创 2022-11-20 17:54:58 · 1303 阅读 · 0 评论 -
CSS12_CSS 布局 - 水平 & 垂直对齐
CSS 布局 - 水平 & 垂直对齐待补充原创 2021-03-30 23:09:28 · 128 阅读 · 0 评论 -
CSS11_clear: both清除浮动
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为:设置了clear:both的当前元素会把前边元素中设有浮动属性的元素,当做没设浮动一样来看待,以此来消除其对自己的影响...原创 2021-03-30 23:04:50 · 209 阅读 · 0 评论 -
CSS10_display显示 与 visibility可见性
一、display(显示)常用值:display: inline 使元素变成行内元素,拥有行内元素的特性,即不会独占一行。display: block 使元素变成块级元素,独占一行。display: inline-block 融合行内于块级(常给<li>元素设置,这样垂直的列表便可以水平显示了)inline:内联元素(a/lable/input/img)可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行。不能.原创 2021-03-30 23:02:18 · 146 阅读 · 0 评论 -
CSS09_position定位
菜鸟教程 | CSS Position参数名理解static固定定位HTML 元素的默认值,即没有定位,遵循正常的文档流对象relative相对定位相对其正常位置定位absolute绝对定位相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于HTMLfixed固定定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动sticky粘性定位在 position:relative 与 position:fixe原创 2021-03-30 22:35:37 · 85 阅读 · 0 评论 -
CSS08_ : 与 :: 区别
一个冒号 : 是伪类,两个冒号 :: 是伪元素一、定义伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。二、伪类和伪元素的区别:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定原创 2021-03-29 13:02:29 · 363 阅读 · 0 评论 -
CSS07_四种方式解决高度塌陷
前言:什么是高度塌陷?父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度塌陷问题。方案一:给父元素一个固定的高度缺点:一旦将父元素高度写死,它将不能自动适应子元素的高度,不够灵活,不推荐使用。方案二:给父元素添加属性 overflow: hidden;优点:浏览器支持好,简单;缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。方案三:添加一个空的div步骤一:直接在高度塌陷的父元素的最后添加一个原创 2021-03-29 12:45:55 · 103 阅读 · 0 评论 -
CSS06_盒模型
一、margin 与 paddingmargin: 盒子与其他盒子的距离,不影响内部margin:auto 使元素在其容器中水平居中。margin:inherit 元素外边距继承自父元素拓展:CSS 外边距合并padding: 内容区与盒子边框之间的距离,会改变可见框大小如果不想让padding改变宽度,可以加上box-sizing: border-box;二、border边框边框必须设置三个值: border-width: border-color: border-..原创 2021-03-29 09:10:03 · 203 阅读 · 0 评论 -
CSS05_text文本
1. 文本对齐 text-align用来设置文本的水平对齐方式格式: //相较于父元素 text-align:right; text-align:left; text-align:center; text-align:justify;//两端对齐(如下图)2. 文本修饰 text-decoration用来设置或删除文本的装饰。 text-decoration:none;//去除(链接)的下划线 text-decoration:overline;//添加上划线 .原创 2021-03-28 23:35:38 · 63 阅读 · 0 评论 -
CSS04_hover效果
一、各个属性(持续补充ing)1、opacity透明度与transition转变时间.btn{ opacity: 0.5;//透明度 transition: opacity(其他属性名都可) 0.5s;//转变时间}.btn:hover{ opacity: 1;//透明度}原创 2021-03-24 23:57:47 · 74 阅读 · 0 评论 -
Html06_常用标签03-select
前言:W3School:HTML 标签一、实例创建带有 4 个选项的选择列表:<select> <option value="vivo">vivo</option> <option value="OPPO">OPPO</option> <option value="iPhone">iPhone</option> <option value="Huawei">Huawei</opt原创 2021-02-24 10:45:39 · 85 阅读 · 0 评论 -
Html05_input中radio单选框如何产生互斥效果(只能选一个)
给每个input添加相同的name属性,这样表单提交时只能选择一个原创 2021-02-23 21:31:19 · 5332 阅读 · 0 评论 -
CSS03_表格边框属性/隔行设置
一、设置内外边/去除边框距离及重叠;二、隔行设置属性/hover属性原创 2021-02-23 11:03:55 · 295 阅读 · 0 评论 -
CSS02_设置盒子水平+垂直居中 & 设置文本水平+垂直居中
写在前面:让div中文字水平居中:text-align: center;方法1. 在不知道div的宽高的情况下采用absolute绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,便可达到水平+垂直居中效果.center { position: absolute; top: 50%; left: 50%; /*-webkit原创 2021-02-22 22:01:44 · 9360 阅读 · 0 评论 -
CSS01_transform: translate(-50%,-50%)
问题:当使用 top: 50%;left: 50% 时,元素并不在中心,而是偏右下一点代码:.center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*-webkit 是表示针对 safari 浏览器支持,-ms表示针对 IE 浏览器支持*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50原创 2021-02-22 21:20:09 · 383 阅读 · 2 评论 -
Html04_input框中的value/key/placeholder到底是什么
1.input框中的value值到底是什么value 属性为 input 元素设定值。input标签有很多类型,也就是type,对于不同的输入类型,value 属性的用法也不同,以下是一些常用type的说明text: 文本框,input默认的type,不写就是这个,value表示文本框里的值password:密码框,value表示密码框里的值。submit:提交按钮,value表示按钮上的文字button:普通按钮,value表示按钮上的文字reset:重置按钮,value表示按钮上的文.原创 2021-02-22 20:46:07 · 2033 阅读 · 0 评论 -
Html03_常用标签02-span
1. span标签简介span标签是在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。<span>本身没有任何属性。(内联元素)2. span标签与p标签区别p标签与span标签区别在于display,一个是block,一个是inline.span是内联元素,可以设置任意元素(文字,图片…);p是块元素代表段落paragraph块元素和内联元素的主要区别:块元素独占一行,元素的高度、宽度、行高以及顶和底边距都可.原创 2021-02-19 08:51:48 · 132 阅读 · 0 评论 -
Html02_常用标签01-label
1. label 元素不会向用户呈现任何特殊效果;2.不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上;3.`<label> `标签的 for 属性应当与相关元素的 id 属性相同。原创 2021-02-12 22:52:27 · 110 阅读 · 0 评论 -
Html01_表格-tr/th/td区别
tr、th与td区别:tr定义行、th表示头部、td表示单元格tr不能单独存在,相当于table的属性标签,th、td也应当放在tr中th是粗体居中的原创 2021-02-11 13:55:04 · 1125 阅读 · 0 评论