Html+css
关注
分享
扫一扫
自～渡
路漫漫其修远兮，吾将上下而求索
展开
-
前端常用布局方式
1、标准流（默认布局）块级元素独占一行；内联元素在同一行显示；2、浮动（float）‘浮’：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面；‘漏’：浮动的盒子不占位置，元素原先的位置会漏给标准流的盒子‘特’：浮动使元素具有行内块特性；（1）元素的浮动：元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。左浮动 float： left;...原创 2019-09-19 18:57:08 · 401 阅读 · 0 评论
-
用border属性画三角形
三角形原创 2020-06-12 01:03:04 · 654 阅读 · 0 评论 -
CSS中link和@import的区别
区别：（1）link属于HTML标签，而@import是CSS提供的语法规则（2）@import存在兼容性问题，IE5以上才能识别；link是HTML标签，没有兼容性问题（3）link引入样式的权重要高于@import引入样式的权重原创 2020-06-12 00:15:35 · 101 阅读 · 0 评论 -
使元素隐藏消失的方法
visibility：hidden；元素隐藏，但保留位置，不改变页面布局display：none；元素隐藏后不保留位置，会改变页面布局，相当于元素被删掉z-index：-1；opacity：0；元素隐藏，但不会改变页面布局原创 2020-06-11 18:52:30 · 204 阅读 · 0 评论 -
CSS优先级、权重
排序：！important > 作为style属性写在元素内的样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承样式 > 浏览器默认属性注意：属性后面加 !important 会覆盖页面内任何位置定义的元素样式同一级别的样式，后写的会覆盖先写的...原创 2020-06-11 18:45:29 · 147 阅读 · 0 评论 -
img中 alt 和 title的区别
图片中的alt属性是在图片不能正常显示时出现的文本提示，alt有利于SEO优化图片中的title属性，是在鼠标移动到元素上的文本提示原创 2020-06-11 18:31:27 · 204 阅读 · 0 评论 -
display：none 和 visibility:hidden的区别
display：none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在visibility：hidden;隐藏对应的元素，但是在文档布局中仍保留原来的空间原创 2020-06-11 18:27:40 · 230 阅读 · 0 评论 -
BFC规则以及如何触发
BFC是什么？块级格式上下文，一个独立的渲染区域，BFC也可以看作是一种规则，触发了BFC规则的元素，就像是一个独立的容器，容器里面的元素不会在布局上影响外面的元素，就像被隔离了一样BFC规则：1、...原创 2020-06-10 19:17:34 · 1075 阅读 · 0 评论 -
请添加CSS代码，绘制出一个600像素宽，400像素高，水平垂直居中的模态框
请添加CSS代码，绘制出一个600像素宽，400像素高，水平垂直居中的模态框？<body> <div class="modal-wrapper"> <div class="modal"></div> </div></body>body { margin: 0; padding: 0;}.modal-wrapper { position: fixed; top:原创 2020-06-08 15:43:13 · 681 阅读 · 0 评论 -
渐进增强与优雅降级
渐进增强：渐进增强一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器追加各种功能达到更好的用户体验，以实现最基础功能为基本，向上兼容。优雅降级：优雅降级一开始针对一个高版本的浏览器构建页面，先完善所有的功能，然后针对各个不同的浏览器进行测试、修复，保证低级浏览器也有基本功能，以高要求，高版本为基准，向下兼容。...原创 2020-06-07 20:48:07 · 147 阅读 · 0 评论 -
CSS盒模型
盒模型原创 2020-06-07 14:01:35 · 95 阅读 · 0 评论 -
CSS 清除浮动
当父元素不给高度的时候，且内部元素不浮动，父元素的高度由子元素的高度撑开；内部元素浮动的时候，父元素会变成一条线。为什么要清除浮动？为了解决父元素因为子元素浮动引起的高度塌陷为0的问题清除浮动的方法：（1）额外标签法（添加无意义标签，语义化差）在最后一个浮动标签后面，新加一个标签，并设置clear：both；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-06-06 22:03:37 · 99 阅读 · 0 评论 -
如何实现左右两栏一定比例，左栏高度随右栏高度自适应？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现左原创 2020-06-06 21:29:46 · 760 阅读 · 0 评论 -
CSS实现宽度自适应100%，宽高比例为16: 9的矩形？
宽度自适应100%，宽高比为16：9，即100%：h = 16：9，计算出来矩形高度 h = 56.25%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-原创 2020-06-06 17:15:44 · 1660 阅读 · 0 评论 -
CSS 垂直、水平居中
一、垂直居中1、line-height适用：单行文字，下拉框，按钮等办法：设置单行行内元素的 行高 = 盒子的高度2、absolute + margin 负值要求：已知该元素高度办法：父元素设置position：relative；子元素设置position：absolute；top：50%；margin-top：负的子元素自身高度的一半；3、absolute + margin：auto要求：已知该元素高度办法：父元素添加 position：relative；子元素设置pos原创 2020-06-06 15:37:06 · 127 阅读 · 0 评论 -
flex布局
概念：flex布局表示弹性布局，即弹性盒模型，任何一种元素都可以指定为flex布局。flex布局的核心概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。容器：父容器可以统一设置子容器的排列方式；子元素也可以单独设置自身的排列方式；如果两者同时设置，以子容器的设置为准。使用flex布局要注意：如果是webkit内核的浏览器，需要加上-webkit前缀；在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用fl原创 2020-06-06 11:37:48 · 146 阅读 · 0 评论