css原理
关注
分享
扫一扫
css原理
weixin_42291794
这个作者很懒，什么都没留下…
展开
-
Emmet 语法规则
概念Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写按tab键自动扩展基本语法后代：>兄弟：+上级：^ID：#类：.乘法：*自增：$分组：()代码示例//emmet语法div.wrap>(div.left>div*3.div$)+div.right>a#test//扩展后<div class="wrap"> <div class="left原创 2020-07-24 09:36:26 · 161 阅读 · 0 评论 -
css网页响应式布局
1. 自适应布局自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。2. 响应式布局响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容3. 响应式布局方案媒体查询百分比width、padding（上下左右）、margin（上下左右）：百分比相对于直接父元素的宽度height：直接父元素的高度border-radius、background-size、translate：原创 2020-07-29 19:03:19 · 297 阅读 · 0 评论 -
flex布局概念
flex弹性布局;块元素display:flex;行内元素display:inline-flex;设为flex布局后，子元素的float、clear、vertical-align属性将失效Flex 布局的元素，称为 Flex 容器；它的所有子元素自动成为容器成员，称为 Flex 项目容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross原创 2020-07-28 09:53:16 · 123 阅读 · 0 评论 -
image自适应图片容器和background自适应容器
1. imagecover：保持原有比例，图片不变形；图片被裁减，表现为覆盖，替换元素部分区域不可见contain：保持原有比例，图片不变形；变现为包含，容器内会有留白fill：不保持原有比例，图片变形；表现为填充，替换内容拉伸至填满整个容器2. backgroundbackground-color: #ff0;背景颜色background-image: url(’./imgs/1.jpg’);背景图片地址background-repeat: no-repeat;背景图片是否平铺原创 2020-07-27 12:07:28 · 840 阅读 · 0 评论 -
css 居右居中对齐 及 margin:auto 的作用细节
浮动：float:rightposition定位：right:0flex布局：justify-content:flex-endmargin：父子元素宽度固定时，margin-right:0;margin-left:automargin:auto作用规则一侧定值，一侧auto，则auto为剩余空间大小;两侧均为auto，则auto平分剩余空间大小;margin初始值为0；块元素左右对齐：margin:auto内联元素左右对齐：text-alignmargin:auto..原创 2020-07-24 12:13:40 · 1361 阅读 · 0 评论 -
inline-block元素空白间距问题及清浮动问题
inline-block元素中间会有单词间距;word-break换行规则，可能会把换行，tab，一个或多个空格都压缩为一个空格;word-spacing规定单词间距为多少；去除inline-block空白间距方法：设置父元素word-spacing为负值，如-5px；设置父元素字体大小为0，子元素再重置字体大小；html代码不换行，但很不美观；把子元素inline-block改为float，float没有空白间距，记得清浮动；在浮动元素后面加一个div，设置content:..原创 2020-07-24 11:18:30 · 92 阅读 · 0 评论 -
css中的 x line-height vertical-align
x：字母x的下边缘为基线（baseline）字母x的高度为x-height、ex（相对于字体和字号的单位）字母x的交叉点的位置为middleline-height：vertical-align:原创 2020-06-12 11:34:53 · 159 阅读 · 0 评论 -
css居中，非定位和float
水平居中行内元素：text-align:center<!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&g原创 2020-06-18 08:09:25 · 177 阅读 · 0 评论 -
css 盒子分类 及内联元素和块级元素盒模型设置是否生效问题
元素概念：html标签就是元素，元素一般有内部盒子和外部盒子区分：元素外部盒子内部盒子块级盒子内联级盒子块级盒子内联级盒子分类：根据外部盒子的不同可以分为行内元素和块级元素行内元素和块级元素特点行内元素不能设置,即无法改变盒子尺寸：width、height、margin-top、margin-bottom可以设置但可能无效果：padding-top、padding-bottom（当距离前面后面元素（或者父元素上下）距离大于等于padding-top或padding-bottom的值时原创 2020-06-12 07:34:21 · 302 阅读 · 0 评论