随笔分类 -  【001】HTML&CSS

CSS样式手册
摘要：字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-heigh 阅读全文
posted @ 2020-07-31 19:06 给时光以生命 阅读(485) 评论(0) 推荐(0)
DOM操作方法、属性
摘要：话不多说直接上demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="contain 阅读全文
posted @ 2020-07-31 19:06 给时光以生命 阅读(431) 评论(0) 推荐(0)
三栏布局的5种方案
摘要：题目： 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应的设置方案有几种？ 这里考察的是你对CSS的理解 首先初始化样式 body{ margin:0; padding:0; } HTML编写 由于三栏布局HTML代码几乎差不多，下面就不过多重复编写了。 <body> <s 阅读全文
posted @ 2020-02-28 19:40 给时光以生命 阅读(455) 评论(0) 推荐(0)
css3——box-sizing属性
摘要：很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？ 例子1： 效果如下： 此时你可 阅读全文
posted @ 2019-09-14 22:37 给时光以生命 阅读(2246) 评论(1) 推荐(0)
网站布局——文档流
摘要：一、什么是文档流？将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。 二、什么是脱离文档流？元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态 阅读全文
posted @ 2019-09-09 11:47 给时光以生命 阅读(448) 评论(0) 推荐(0)
HTML块元素与内联元素嵌套规则
摘要：HTML存在许多种类型的标签，有的标签下面只允许特定的标签存在，这就叫HTML嵌套规则。不按HTML嵌套规则写，浏览器就不会正确解析，会将不符合嵌套规则的节点放到目标节点的下面，或者变成纯文本。关于HTML嵌套规则，一定要掌握块状元素和内联元素的区别。 块状元素： 一般是其他元素的容器，可容纳内联元 阅读全文
posted @ 2019-06-24 12:30 给时光以生命 阅读(999) 评论(0) 推荐(0)
CSS3属性—— line-clamp控制文本行数
摘要：说明： 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit 阅读全文
posted @ 2019-06-19 00:38 给时光以生命 阅读(23796) 评论(1) 推荐(3)
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
摘要：准确的说，float浮动属于半脱离文档流，1、float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。可以参考设置 阅读全文
posted @ 2019-06-13 03:39 给时光以生命 阅读(19340) 评论(0) 推荐(0)
CSS3新单位vw、vh、vmin、vmax使用详解
摘要：像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 新单位也成为视窗单位，视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并 阅读全文
posted @ 2019-06-09 15:17 给时光以生命 阅读(1818) 评论(0) 推荐(0)
Flex 布局——语法属性详解
摘要：前言 Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度 阅读全文
posted @ 2019-06-06 02:31 给时光以生命 阅读(5947) 评论(0) 推荐(1)
CSS实现垂直居中的几种方法
摘要：单行文本的居中 1.文字水平居中 2.文本垂直水平居中 二、多行文本的垂直居中 1.使用display:flex实现 flex布局会让容器内的元素得到垂直水平居中 2.使用display:-webkit-box实现 display:flex和display:box都可用于弹性布局实现水平垂直居中，不 阅读全文
posted @ 2019-06-03 20:36 给时光以生命 阅读(45807) 评论(0) 推荐(2)
CSS隐藏元素 display、visibility、opacity的区别
摘要：关于使指定元素无法在视野内看到，有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局。 2.opacity: 0; 该方法不会改变页面布局。 3.visibility:hidden; 该方法不 阅读全文
posted @ 2019-06-03 17:55 给时光以生命 阅读(3028) 评论(0) 推荐(2)
深入了解opacity和rgba
摘要：1. rgba 首先它是一个属性值，语法为rgba（r,g,b,a） - r为红色值， 正整数 | 百分数 - g为绿色值，正整数 | 百分数 - b为蓝色值，正整数 | 百分数 - a为alpha（透明度），值为0 ~ 1之间的小数， 0.0 （完全透明）到 1.0（完全不透明） - 上面的正整数 阅读全文
posted @ 2019-05-30 21:01 给时光以生命 阅读(1100) 评论(0) 推荐(0)
前端css杂记
摘要：1em等于16px，页面默认是16px，一个字宽高都等于16px; 当行内元素display：inline的元素设置float:left浮动后，display值也被设置成block;总结：无论行内元素还是块元素，被设置浮动之后，display属性值都变为block;更具体的说，是变成了Inline- 阅读全文
posted @ 2019-05-30 17:41 给时光以生命 阅读(170) 评论(0) 推荐(0)
css浮动产生和清除浮动的几种方式
摘要：浮动的语法：float:left/right; 浮动float的原本设计了作用初衷是为了实现文字环绕效果 浮动产生负作用： 1、背景不能显示 2、边框不能撑开父元素 3、margin padding设置值不能正确显示 浮动之后会使父元素内的子元素漂浮在父元素上方，造成父元素边框重叠。所以需要清除浮动 阅读全文
posted @ 2019-05-30 16:20 给时光以生命 阅读(3115) 评论(0) 推荐(1)
常用css属性
摘要：1.伸缩导航菜单 a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a:hover{ color:#fff;background-color:#F 阅读全文
posted @ 2019-05-23 22:19 给时光以生命 阅读(502) 评论(0) 推荐(0)
margin和text-align实现水平居中的区别
摘要：1.首先text-align只应用于内联块和内联元素 text-align影响的是元素中的文本内容的对其方式（默认是left，设置为center时水平居中） 所以，将text-align设置为center时，只有当应用于块级元素并且元素内容为文本时，才会生效，即text-align不会控制元素的对齐 阅读全文
posted @ 2019-05-21 00:01 给时光以生命 阅读(807) 评论(0) 推荐(0)