![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css基础知识
我又懂了
这个作者很懒,什么都没留下…
展开
-
栅格系统
栅格系统栅格系统 是横向布局的处理方式,使用起来非常方便适应ie8以上的版本,今天仿照bootstrap写一下基础的栅格系统。容器 类名.row将栅格布局中所有的元素浮动,便于布局。 如果用户自定义自己的父容器,不使用.row父容器 ,那么将需要自己清除浮动,计算父容器高度。bootsrap3是将.row 容器等份12份 我们也仿照进行12份。浮动后元素变为行内块,所以元素内需要添加内容...原创 2019-11-17 22:13:13 · 331 阅读 · 0 评论 -
css3 伪类child详解
话不多说,代码刚起来。 <nav > <ul> <li>item01</li> <li>item02</li> <li>item03</li> <li>item04</l...翻译 2019-11-16 16:42:44 · 644 阅读 · 0 评论 -
解决浏览器兼容性问题hack
hack主要解决低版本 ie 6、7、8兼容性问题 更高版本的浏览器出现的兼容性问题最好不要使用hack来解决,因为hack只是通过在低版本中声明了CSS 一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的(原本该版本中不兼容的)从而达到能够使用的目的,但是后面的更新的版本如果兼容了该标签...原创 2019-11-12 20:52:19 · 279 阅读 · 0 评论 -
精灵图片
目录一、名词解释二、使用难点三、使用步骤四、程序源码一、名词解释 在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次...转载 2019-11-12 20:24:34 · 242 阅读 · 0 评论 -
关于html页面知识点总结
<!DOCTYPE html> <html lang="en">Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。此处加上html 是为了声明此文件为HTML文件HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<...转载 2019-11-12 20:20:54 · 227 阅读 · 0 评论 -
转载常见转义字符
转载 CSS转义字符对照表 ...转载 2019-11-11 16:30:23 · 1994 阅读 · 0 评论 -
css模糊知识点总结
一、定宽居中在很多的电商网页中导航条和内容都是居中对齐的,比如华为的商城,此时我们就可以用到定宽居中来实现这种效果。1. 原理将元素固定宽度,通过为元素添加样式 margin-left | margin-right:auto,利用自身的外边距实现元素对于父容器中的左右居中2. Tips首先应该先定宽,将自身宽度固定才能实现居中效果。块级元素如果不设置自身的宽度就会默认为100%父元素...原创 2019-11-12 09:04:37 · 101 阅读 · 0 评论 -
css基础之3D旋转
3D旋转的定义学过美术的都应该知道,在平面中实现看出来是3D的效果就必须用到透视。css中定义3D的方式是transform-style:<flat|preserve-3d>属性。前者flat为默认值,表示平面的;后者preserve-3d表示3D透视。元素样式中添加transfrom:perspective属性。无透视不3d;透视还需要一个视点perspective。视点就是能...原创 2019-10-25 09:41:45 · 1453 阅读 · 0 评论 -
css布局之弹性布局flex
1. 弹性布局作用作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局。2.弹性布局的定义和属性弹性布局是定义在一个父容器中,加上display:flex样式使父容器的布局方式成为弹性布局。父容器中的子元素都会成为行内块,默认所有子元素横向排列,子元素的float、clear和vertical-align属性将失效。但是position...原创 2019-10-24 23:59:53 · 1206 阅读 · 0 评论 -
使用边框画圆深入理解border-radius
在css中经常会用到border-radius来画一个圆圈的效果。但是之前并不知道为什么。今天就深入研究一下。什么是radiusradius,半径的意思。结合border边框属性,边框的半径是啥意思呢?个人的理解是给边框一个弧度,radius就是这个弧度半径的值。像下面这样。所以如果想要画一个圆只需要将div的宽度=2*radius即可实现圆的效果。border-radius的分类大家...原创 2019-10-23 20:59:21 · 2250 阅读 · 0 评论 -
布局
弹性布局使用方式重点:微信;微信小程序;各个小程序优先弹性布局使用规则:1:找到父容器:给父容器设置display:flex2:一旦容器变为flex布局,主轴 与 交叉轴就会存在(你用不用都存在)3:确定主轴方向:flex-deriction 默认水平方向 从左往右---->决定子元素横向的排列4:在主轴上怎么排列--------->justify-content 决定 左对...原创 2019-10-21 09:53:39 · 97 阅读 · 0 评论 -
CS基础知识之定位
基础布局方法position定位1、定位分类position:相对定位 relative绝对定位 absolute固定定位 fixed2、定位用法相对定位:相对与自身原本的位置进行定位不会脱离文本流,自身的位置任然保留绝对定位:相对于不是有position属性的父容器进行定位。如果父容器的父容器的父容器…一直没有position属性就相对于body进行定位。固定定位:固定在浏览...原创 2019-10-21 09:51:56 · 1167 阅读 · 0 评论 -
基础知识之浮动
本人前端小白一枚,正在自学前端希望利用博客记录并深入挖掘前端的知识。首先从浮动开始。浮动的作用CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。比如在一个大div中有两个靠左右的布局时就可以使用浮动。浮动使用方法:style{.divv{`float:<right>||<le...原创 2019-10-21 08:16:47 · 108 阅读 · 0 评论