css学习总结
关注
分享
扫一扫
Amanda&Rachel
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
2020-12-17 html、css面试题3: 水平垂直居中，左右固定中间自适应 三栏布局，静态布局、自适应布局、流式布局、响应式布局、弹性布局，IE中常见的兼容性问题，清空数组的方法
11.如何让一个盒子水平垂直居中1、 如何让一个盒子水平垂直居中①定位：（常用方法,推荐）position:absolute;position:relative;left:值;top:值;②display:table-cell;③外边距：margin-left:值;margin-top:值;④margin:auto;（不兼容低版本的IE浏览器）⑤弹性盒模型：display:flex;justify-content:conter;align-itens:center;⑥用trans原创 2020-12-17 20:42:40 · 568 阅读 · 1 评论 -
2020-12-16 html、css面试题2:flex布局，css 隐藏元素，position定位，BFC，浮动和清除浮动，外边距重叠，防止外边距重叠
6.简述flex布局flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）flex-direction：决定主轴的方向row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。flex-wrap：换行nowrap（默认）：不换行。wrap：换行，第一行在上原创 2020-12-16 18:38:06 · 479 阅读 · 0 评论 -
2020-12-14html、css面试题1:html5CSS3新特性,移除元素,浏览器兼容,区分HTML 和HTML5,行内元素和块级元素的区别,重绘和回流,CSS 选择符,优先级算法,盒模型宽高
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。H5新特性有：语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket移除了： 1、显现层元素：basefont 、big、center、font、s、strike、tt、u 2、性能较差元素：frame、原创 2020-12-14 20:05:55 · 151 阅读 · 0 评论 -
2020-11-16学习总结： sass配置
一、安装和使用1.安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass然后，就可以使用了。2.使用在文件的根目录下的控制台输入sass test.scss test.css可以把我们写的.scss文件转换为我们需要使用的.css文件。二、基本用法1. 变量SASS允许使用变量，所有变量以$开头。$blue : #原创 2020-11-16 21:56:34 · 296 阅读 · 0 评论 -
2020-11-15 css实例：轮播图及样式解释
css实例：轮播图轮播图主要实现步骤为：先建立一个div容器放置需要展示轮播图的界面（只留出一个图片的空间），再给所有图片外面加一个div容器，放置所有需要轮播的图片（所有图片的空间），最后给图片div盒子设置动画，轮播图盒子溢出隐藏其他图片。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .b原创 2020-11-15 19:16:10 · 269 阅读 · 0 评论 -
2020-11-14 css实例：CSS Sprites精灵图实例及样式解释
CSS Sprites精灵图精灵图长啥样？我们经常看到的很多小图标共同组成了这张大的的背景图。这样的背景图我们称之为精灵图。CSS Sprites精灵图实例<!DOCTYPE html> /*本例为给li中文字前添加背景图标*/<html> <head> <meta charset="UTF-8"> <title></title> <style> ul li{ /*每一行内容的大盒子原创 2020-11-15 00:17:50 · 357 阅读 · 2 评论 -
2020-11-13 学习总结：圣杯和双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。如图：中间内容随着页面放大缩小（自适应），左右两边固定位置宽度圣杯布局定义中间内容，左右之外额外加一个大盒子<body> <div class="box"> <div class="center"></div> <div class="left"></div> <d原创 2020-11-13 20:50:30 · 122 阅读 · 0 评论 -
2020-11-12 学习总结：css弹性盒子布局
flex弹性盒子布局语法：display：flex属性与值1、flex-direction属性决定主轴的方向（即项目的排列方向）值：flex-direction:row/row-reverse/column/column-reverserow:默认值。项目在主轴显示，起点在左端row-reverse:项目在主轴显示，起点在右端column:项目在垂直显示，起点在上端column-reverse：项目在垂直显示，起点在下端2、flex-wrap（常用）是否在在一行显示值：flex-原创 2020-11-12 12:01:43 · 135 阅读 · 0 评论 -
2020-11-11 css实例：3d旋转盒子及样式解释
css实例：弹性盒子3d旋转盒子<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ /*最外面的大盒子*/ width: 300px;/*宽度*/ height: 300px;/*高度*/ padding: 50px;/*字与边框之间的间距*/ border原创 2020-11-11 18:52:37 · 291 阅读 · 0 评论 -
2020-11-10 学习总结：css3新增3 2D效果，动画
1.transform 用于2D和 3D转换 可以旋转 缩放 倾斜 移动 translate()用于当前元素的移动 translate(x,y) translateX(x) translateY(y) rotate()旋转 顺时针旋转元素 为负值时 逆时针旋转 rotate(deg) scale()缩放 增加或减小元素的大小 取决于宽度（X轴）和高度（Y轴）的参数 skew()变形 变换x和y轴的倾斜角度原创 2020-11-10 20:16:38 · 140 阅读 · 0 评论 -
2020-11-09 学习总结；css3新增2
1. 根元素伪类选择器 :root 匹配文档中的根元素 也就是html :empty 匹配没有任何内容的子元素2.css3 浏览器属性前缀 五大浏览器的内核 Trident(三叉戟 三齿鱼叉 三叉线) 是Internet Explorer的内核 Gecko(壁虎) 是Mozilla Firefox的内核 Webkit 是Google Chrome,Safari内核 Presto(迅速的) 是Opera的内核 //Blink 由googl原创 2020-11-09 20:41:32 · 174 阅读 · 0 评论 -
2020-11-08 css实例：iframe后台管理系统实例及样式解释
后台管理系统我们常看到的Web端的后台管理员页面，结构基本都是页头、页尾，中间左侧菜单，右侧为主要页面。实现的方法有多种，iframe是最常见的一种。需要的文件：因为iframe后台管理系统是将多张 HTML 网页放到一个页面内，组成一个复合的 HTML页面，所以需要多个页面。css实例：iframe后台管理系统实例index页面：主体页面<!DOCTYPE html><html> <head> <meta charset="utf-8" /原创 2020-11-08 23:23:47 · 956 阅读 · 0 评论 -
2020-11-08 HTML5+CSS3新增元素
html5新增figure<figure> --表示一组相关联的内容 <figcaption></figcaption> --内容标题 必须与内容有关系 可以放在第一行 也可以放在最后一行</figure><canvas></canvas> --画布<audio src=""></audio> --音频 支持的格式：MP3 WAV Ogg 属性：src 链接路径文件 loop 结原创 2020-11-08 22:11:26 · 221 阅读 · 0 评论 -
2020-11-07 css实例：滑动门实例及样式解释
滑动门长啥样像我们经常浏览的网站，京东，淘宝等，首页都会有一个购买引导的分类栏目，鼠标移动到某一个关键词时，右侧会展示一个更详细的分类导航，如上图。css实例 滑动门<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*reset样式*/ *{ margin: 0;原创 2020-11-07 22:36:03 · 383 阅读 · 0 评论 -
2020-11-07 css基础8
1.BFC块级格式上下文 BFC全称为Block Formatting Context 它是页面中的一块渲染区域 它决定了子元素如何定位 BFC形成一个独立的空间 让其空间中的子元素不影响外部的元素2.产生BFC的环境 浮动元素 值不为none 定位元素 值不为static 溢出文本 值不为visible 更改元素类型 值为inline-block、table-cell, table-caption, flex, inline-flex。3.iframe标签原创 2020-11-07 21:18:19 · 108 阅读 · 0 评论 -
2020-11-06 css实例：二级导航实例及样式解释
css实例：二级导航实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> /*重置样式*/ *{ margin: 0; padding: 0; } ul li{ list-style: none; } a{ text-decor原创 2020-11-06 09:11:21 · 220 阅读 · 0 评论 -
2020-11-06 学习总结：css基础7
1.元素对不齐 让元素浮动 设置元素vertical-align:top;2.vertical-align 设置垂直对齐的方式 top bottom middle3.鼠标指针bug cursor属性 鼠标指针显示的方式 hand 只支持IE8及以下版本 pointer IE6以上及其他浏览都支持4.高度塌陷 设置父级元素的高度 放一个空的div 清除浮动(兼容性强 不利于优化) overflow:hidden (兼容性强 对m原创 2020-11-06 07:50:46 · 203 阅读 · 0 评论 -
2020-11-05 css实例：轮播图上的小圆点
轮播图上的小圆点类似这种效果:（截图为京东代码）选中当前图片时代码未选中当前图片时代码css实例：轮播图上的小圆点html代码：设置一个div盒子banner,里面放轮播图片和装圆点的容器<div class="banner"> <ul> <li><a href=""><img src="img/652777a7ca7a0519.jpg.webp" alt="" /></a></li>原创 2020-11-05 17:07:28 · 8406 阅读 · 0 评论 -
2020-11-05 css实例：粘性定位及样式解释
粘性定位粘性定位是相对定位和固定定位的混合，给盒子设置一个偏移量，未到达该偏移量时是相对定位，到达偏移量时是固定定位。css实例粘性定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ /*重置样式*/ margin: 0; padding原创 2020-11-05 14:56:18 · 401 阅读 · 0 评论 -
2020-11-05 css实例：固定定位及样式解释
固定定位实例HTML：建立一个无序列表，添加内容 <div class="rightnav">/*建立一个div大盒子*/ <ul> <li><a href="">手机APP</a></li>/*每一行li里添加内容*/ <li><a href="">个人中心</a></li> <li><a href="">售后服务&l原创 2020-11-05 13:35:48 · 191 阅读 · 0 评论 -
2020-11-05 css实例：导航栏实例及样式解释2
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> /*reset样式*/ *{ margin: 0; padding: 0; } ul li{ list-style: none; } a{ text-decoration: none;原创 2020-11-05 09:08:34 · 215 阅读 · 0 评论 -
2020-11-05 css实例：新闻列表文本溢出效果及样式解释
新闻列表文本溢出效果<!DOCTYPE html>/*声明HTML5*/<html> <head> <meta charset="UTF-8">/*编码*/ <title></title> <style> *{ /*reset重置样式*/ margin: 0; padding: 0; } #list1{ /*新闻列表主体*/ margin: 20px; /原创 2020-11-05 08:16:06 · 356 阅读 · 0 评论 -
2020-11-04 学习总结 css基础6 相对定位绝对定位，元素的层叠顺序z-index，精灵图，创建锚点，浏览器相关，简单bug处理
1.相对定位和绝对定位的区别 相对定位是相对于元素本身定位 通过偏移量设置定位元素与原来位置的距离、 绝对定位是相对于祖先元素定位 子集开启绝对定位 父级开启相对定位2.元素的层叠顺序z-index 值为整数 值较大的元素会叠加到值较小的元素之上 默认层是0 可以设置负值3.精灵图/雪碧图 网页图片处理的方式 将零星的图片整合成一张大图片 优点：减少服务器的请求次数 提高页面的加载速度 缺点：不利于后期维护，需要合理规划4.创建锚点 &l原创 2020-11-04 19:51:51 · 974 阅读 · 0 评论 -
2020-11-04 学习总结 css基础5
1.元素分类： 块级元素 特点：独占一行 支持宽高 完全支持盒模型 标签：p div ul li ol dl dt dd table h1 h2 h3 h4 h5 h6 address tr form hr blockquote fieldset legend 内联元素 特点：不独占一行 宽高由内容撑开 选择性支持盒模型 标签：span i u b em strong small big sup sub label s strike a font b原创 2020-11-04 07:40:52 · 128 阅读 · 0 评论 -
2020-11-03 学习总结 css基础4
1.文档流 网页元素的状态 在文档流中 不在文档流中 网页元素在文档流中的特点 块元素 独占一行(从上到下排列) 宽度默认是父元素的宽度(不能超过父元素宽度) 高都默认被内容撑开 行元素 不独占一行 从左到右依次排列 如果一行不能容纳 则换行继续从左到右依次排列 宽高默认被内容撑开2. float 浮动 none 默认值 不浮动 left 左浮动 right 有浮动 作用：用于页面水原创 2020-11-03 23:12:18 · 123 阅读 · 0 评论 -
2020-11-02 学习总结：浮动与清除浮动方法
CSS 浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。float属性指定一个盒子（元素）是否应该浮动。定义和用法float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的原创 2020-11-02 22:15:02 · 174 阅读 · 0 评论 -
2020-11-01 学习总结：CSS3 opacity 属性 设置元素的不透明度
CSS3 opacity 属性定义和用法opacity 属性设置元素的不透明级别。默认值是1。div{background-color:red;opacity:0.5;filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */}效果如下：不透明度为0.5所有浏览器都支持 opacity 属性。注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。IE9, Firefox, Chrome原创 2020-11-01 22:17:03 · 746 阅读 · 0 评论 -
2020-10-31 学习总结 css基础3
1.padding内边距 padding-top 设置上填充 padding-left 设置左填充 padding-right 设置右填充 padding-bottom 设置下填充 padding 复合属性 像素值 % 注意：可以是一个值 两个值 三个值 四个值 一个值 设置的是四个方向的填充 两个值 设置的是上下 和 左右 的填充 三个值 设置的是上 左右 下 的填充 四个值 设置的是上 右 下 左的填原创 2020-10-31 23:11:21 · 120 阅读 · 0 评论 -
2020-10-31 css实例：导航栏模板及样式解释
W3C完整样式的水平导航栏实例<!DOCTYPE html><html><head><style>ul{list-style-type:none;/*设置列表项目符号为空*/margin:0;/*去掉ul，li默认外边距*/padding:0;/*去掉ul,li默认内间距*/overflow:hidden;/*清除浮动*/}li{float:left;/*li向左浮动，使列表横向排列*/}a:link,a:visited /*a原创 2020-10-31 23:07:24 · 611 阅读 · 0 评论 -
2020-10-30 了解：CSS 属性选择器，CSS 伪类，CSS 伪元素
CSS 属性选择器属性选择器可以根据元素的属性及属性值来选择元素。简单属性选择如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。*[title] {color:red;}包含标题（title）的所有元素变为红色a[href] {color:red;}只对有 href 属性的锚（a 元素）应用样式a[href][title] {color:red;}将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色img[alt] {border:原创 2020-10-30 08:41:12 · 131 阅读 · 0 评论 -
2020-10-30 学习总结:css基础2
1.css基础选择器的权重 行内样式 1000 id选择器 100 类选择器 10 标签选择器 1 通配选择器 02.css的关系选择器 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素>子元素{} 例子：div>p .one>span 兄弟选择器 作用：选中相邻的第一兄弟元素 语法： 选择器+选择器{} 例子： h2 + p{} 作用：选中向后的所有指定的兄弟元素原创 2020-10-30 07:44:40 · 118 阅读 · 0 评论 -
2020-10-29 了解：@import外部导入样式，letter-spacing 字间距，word-spacing 词间距 以空格区分
@import外部导入样式link和@import的区别是？（1）link属于XHTML标签，而@import是CSS提供的;（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;（4）link方式的样式的权重 高于@import的权重.发现一个神仙链接css外部样式导入方式：link和@import对比letter-spacing 字间距定义和用法letter原创 2020-10-29 08:51:17 · 181 阅读 · 0 评论 -
2020-10-29 css学习总结 CSS 定位 (Positioning)
CSS 定位 (Positioning)一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。CSS display 属性定义和用法display 属性规定元素应该生成的框的类型。即：行内，块级，行内块等转换。值和描述none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会原创 2020-10-29 08:13:56 · 206 阅读 · 0 评论 -
2020-10-28 学习总结 css基础
1.css: Cascading Style Sheets 重叠样式表 用于美化网页和布局2.css引入方式： 行内样式 放在标签开始 style属性中 语法：<标签 style="属性：值；属性：值；"></标签> 内部样式(内嵌样式) 放在head中 style标签中 语法：<head> <title></title> <style> 选择器{ 属性:值原创 2020-10-28 21:56:15 · 174 阅读 · 0 评论 -
2020-10-26 css学习总结:表格，轮廓
css学习总结:表格，轮廓，盒模型一.表格table, th, td { border: 1px solid blue; }效果如下：出现双线边框是因为table，th，td，都可以设置独立的边框，设置单线条边框（细线表格）需要使用 border-collapse 属性。1. border-collapse 属性定义与用法border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。简单说就是通过border-c原创 2020-10-26 19:31:57 · 216 阅读 · 0 评论