仿写京东过程中经常碰到的CSS问题
CSS
常用属性
-
opacity: 1 !important; 加权重
-
透明度 transparent
-
排列(一行) align
-
背景颜色: background-color
-
宽度: width:100px;
-
高度: height:100px;
-
悬停 hover a :hover 鼠标(手)放上去 类名或者标签名加:hover
-
色块居中 :margin:0 auto(上下方位 左右方位); margin:上 右 下 左;
-
文本居中:text-align:center;
-
图片浮动:左浮动 float:left; 右浮动 float:right;
-
行高: line-height 控制文字上下间距 p{line-height:32px}
-
去掉a标签默认自带的下划线 text-decoration: none/underline/line-through(删除线)
-
类填充 padding: 上 右 下 左; 盒子和它内容之间的间距 往内挤
-
外间距 margin: 上 右 下 左: 一个容器跟一个容器之间的间距 往外扩
-
加粗 font-weight:bolder;
-
字体类型 font-family
-
下边框 border-bottom: border-bottom: 2px solid下边距两像素有一条横线
-
boder:2px solid black;
-
绝对定位,写在需要定的块
position: absolute;
bottom: 0;
right: 0;
需要在相邻父级加
position: relative; -
文本 排列(一行) 左text-align: left;
-
字体大小 font-size: 14px;
文本粗细 font-weight: 400;
文本样式:正常 相当于清除文本样式 font-style: normal; -
CSS3的一个属性,这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
-webkit-font-smoothing有三个属性
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好 -
ctrl+u 查看网站源代码
-
doctype 文档类型
-
外链式, link+tab
-
英文字母单词换行 word-wrap:break-word;
- 中文字母换行 white-space: nowrap;
中文强制不换行 nowrap/ 换行 normal
- 中文字母换行 white-space: nowrap;
-
文本不被选中
- user-select: none;
-
文本首行缩进
- text-indent 属性规定文本块中首行文本的缩进。
-
word-break 属性规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
单行文本出现省略号的条件(面试题)
width:100px宽度
文本隐藏的方式,省略号/ 裁剪 clip
text-overflow: ellipsis;
文字隐藏后添加省略号
white-space: nowrap;
中文强制不换行 nowrap/ 换行 normal
overflow: hidden;
溢出隐藏
多行文本省略的条件
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
/自动隐藏文字/
text-overflow: ellipsis;
/文字隐藏后添加省略号/
-webkit-line-clamp: 2;
/* 控制行数 */
- -webkit-line-clamp是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
背景图
- background-size
- cover: 把背景图片宽度和高度等比例缩放至完全覆盖当前容器后(横向和纵向都要触碰到边缘)会出现图片被裁减的情况
- contion:把背景图宽或高等比例缩放至完全覆盖当前容器后,就会停止缩放,所以会出现留白的情况
- 让背景图定在容器的右下角
background: url(1.jpg) no-repeat right bottom;
- /* 背景图片 /
background-image: url(1.jpg);
/ 背景居中 position位置 /
background-position: center center;
/ 图片的尺寸 /
background-size: cover;
缩写
/ 缩写 背景图片 和 背景居中 /
background:url(1.jpg) center center;
/ 图片的尺寸 -csss3的属性*/
background-size: cover;
- /* 背景图片 /
让原素消失的属性
display:none 不显示,不占位置
visibility:hidden 可见元素隐藏,还占位置
opacity:0 透明度为零
input
input转化为行内块,转化成块,小方框会独占一行
text 文本类型
password 密码类型
button 点击按钮类型
submit 提交按钮类型
reset 重置按钮类型
checkbox 复选框
radio 单选框
file 文件类型
标签属性
placeholder 占位符
value 初始字段
innput行内默认字
placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
该提示会在用户输入值之前显示在输入字段中。
**注意:**placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。
- cursor: pointer; 鼠标显示小手
- 渐变色
- background: linear-gradient(direction, color-stop1, color-stop2, …)
- background: -webkit-linear-gradient(to top right, red, pink, orange);
- background: linear-gradient(angle, color-stop1, color-stop2);
- background: linear-gradient(45deg, color-stop1, color-stop2);
- background: linear-gradient(direction, color-stop1, color-stop2, …)
- 修改框里的内容
:focus 获取焦点 鼠标移到Input框里 outline 外边线
-webkit webkit内核的浏览器的前缀 谷歌
框里文字颜色大小粗细
-moz 火狐浏览器
-ms ie浏览器
webkit 浏览器 input 输入 placecholder
.input::-webkit-input-placeholder {
color: red;
}
.input:-moz-placeholder {
color: red;
}
.input:-ms-input-placeholder {
color: red;
}
a name=“vmLbK”>
vertical-align 属性设置元素的垂直对齐方式。
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | |
% | 使用 “line-height” 属性的百分比值来排列此元素。 允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
定义层级:z-index配合position使用
- z-index-当你定义的CSS中有position属性值为absolute、relative或fixed,用z-index此取值方可生效。此属性参数值越大,则被层叠在最上面。
取消默认事件
// 取消li上的 mousewheel(鼠标滚轮)的默认事件
$(".JS_cate_l").mousewheel(function(e){
e.preventDefault();
})
visibility 属性规定元素是否可见。
- 提示:即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。
值 | 描述 |
---|---|
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |
CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
- opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”
visibility : hidden;
可以看成visibility : 0;
visibility : visible;
可以看成visibility : 1;
- 是否占据页面空间
- 使用 opacity 和 visibility 属性时,元素还是会占据页面空间的,而使用 display 属性时,元素不占据页面空间。
- 对子元素的影响
- 使用 opacity 和 display 属性时,父元素对子元素的影响很明显,子元素设置的 opacity 和 display 属性是不起作用的,显示的效果和父元素一样,而使用 visibility 属性时,子元素如果设置为
visibility:visible;
并没有受父元素的影响,可以继续显示出来。
- 使用 opacity 和 display 属性时,父元素对子元素的影响很明显,子元素设置的 opacity 和 display 属性是不起作用的,显示的效果和父元素一样,而使用 visibility 属性时,子元素如果设置为
- 自身绑定的事件是否能继续触发(消失时)
- visibility 和 display 属性,自身的事件不会触发,而使用 opacity 属性,自身绑定的事件还是会触发的。
- 是否影响其他元素触发事件
- visibility 和 display 属性是不会影响其他元素触发事件的,而 opacity 属性 如果遮挡住其他元素,其他的元素就不会触发事件了。
- 回流
- dispaly 属性会产生回流,而 opacity 和 visibility 属性不会产生回流。
元素提升为合成层后,transform 和 opacity 不会触发 repaint,如果不是合成层,则其依然会触发 repaint。
在 Blink 和 WebKit 内核的浏览器中,对于应用了 transition 或者 animation 的 opacity 元素,浏览器会将渲染层提升为合成层。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。
- 重绘
- dispaly 和 visibility 属性会产生重绘,而 opacity 属性不一定会产生重绘。
- 元素提升为合成层后,transform 和 opacity 不会触发 repaint
- dispaly 和 visibility 属性会产生重绘,而 opacity 属性不一定会产生重绘。
- 是否支持transition
- opacity 是支持 transition的,一般淡入淡出的效果就是这样实现的。
- 当元素是
visibility:hidden;
时,自身的事件不会触发,直接在蓝色块div元素 上加 hover 事件,要去将自身的visibility:hidden 过渡到 visibility:visible
是不会起作用的。但是在其他元素上加事件,来将该元素的visibility:hidden 过渡到 visibility:visible
是可以的
回流(reflow)和重绘(repaint)
-
回流
当页面中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流,就是在页面第一次加载的时候。
dispaly 属性会产生回流,而 opacity 和 visibility 属性不会产生回流。 -
重绘
当页面中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的时候,比如background-color。则称为重绘。
dispaly 和 visibility 属性会产生重绘,而 opacity 属性不一定会产生重绘。
元素提升为合成层后,transform 和 opacity 不会触发 repaint,如果不是合成层,则其依然会触发 repaint。
在 Blink 和 WebKit 内核的浏览器中,对于应用了 transition 或者 animation 的 opacity 元素,浏览器会将渲染层提升为合成层。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。
- 查看重绘方法
我们可以用 Chrome DevTools 的 Rendering 来看看,
先打开 Rendering,把第一个选项勾选,这个选项会 高亮显示需要重绘的区域。
- 回流必将引起重绘,而重绘不一定会引起回流。
京东三角形
/* 边框线:边框线的高度 */
.price {
width: 200px;
height: 80px;
border: 1px solid red;
position: absolute;
margin-top: 80px;
}
.origin-price {
width: 50%;
float: left;
height: 100%;
}
.current-price {
width: 50%;
float: left;
background-color: red;
height: 100%;
}
.current-price::after {
display: block;
content: "";
width: 0;
height: 0;
border-width: 80px 38px 0 0;
border-style: solid;
border-color:transparent white transparent transparent;
position: absolute;
top: 0;
right: 100px;
}
- 图
层叠顺序
层级由低到高:
1.标准流盒子 < 浮动盒子 < 定位盒子
2.background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:0 < 正index
遮罩层after
img不能直接跟after,无效
div {
position: relative;
&:hover:after {
content: "";
position: absolute;
background-color: white;
opacity: .2;
}
&::after {
width: 180px;
height: 42px;
top: 5px;
left: 4px;
}
}
css的calc函数
calc() 函数用于动态计算长度值。
● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
● 任何长度值都可以使用calc()函数进行计算;
● calc()函数支持 “+”, “-”, “*”, “/” 运算;
● calc()函数使用标准的数学运算优先级规则;
SVG 意为可缩放矢量图形(Scalable Vector Graphics)
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
文字 <text>
height 高
width 宽
style 定义css属性
fill 填充色
fill-opacity 填充透明度
fill-rule 图形填充规则
stroke-width 边框宽
stroke 边框颜色
stroke-opacity 边框颜色透明度
cx、cy 圆心坐标
r 半径
rx、ry 水平、垂直半径(椭圆)
x1、y1 直线起点坐标
x2、y2 直线终点坐标
points 多点坐标
d <path>中坐标
<svg viewBox="0 0 50 50">
<polygon fill="#DB4C4C" points="0,50 50,50 50,0"></polygon>
<polygon fill="#E58B8B" points="50,0 0,0 0,50"></polygon>
</svg>
- ps:可参考其他文章自行理解svg的详细使用
比如:菜鸟教程SVG
HTML 嵌套网页 - Iframe
- iframe :标签 可以在父页面中嵌套子页面
- iframe :src的地址就是嵌套子页面的地址
- iframe语法 : 该URL指向不同的网页
<iframe src="URL"></iframe>
- iframe设置高度与宽度
- height 和 width 属性用来定义iframe标签的高度与宽度
- 属性默认以像素为单位, 但是你可以指定其按比例显示 (如:”80%”)
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
- iframe移除边框
- frameborder 属性用于定义iframe表示是否显示边框。
- 设置属性值为 “0” 移除iframe的边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
- 使用iframe来显示目标链接页面
- iframe可以显示一个目标链接的页面
- 目标链接的属性必须使用iframe的属性,如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.bxxx.cn" target="iframe_a">bxxx</a></p>
- 属性
align | - left - right - top - middle - bottom | 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
---|---|---|
frameborder | - 1 - 0 | 规定是否显示框架周围的边框。 |
height | - pixels - % | 规定 iframe 的高度。 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
name | frame_name | 规定 iframe 的名称。 |
sandbox | - “” - allow-forms - allow-same-origin - allow-scripts - allow-top-navigation | 启用一系列对 中内容的额外限制。 |
scrolling | - yes - no - auto | 规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 看上去像是包含文档的一部分。 |
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 中显示的页面的 HTML 内容。 |
width | - pixels - % | 定义 iframe 的宽度。 |
- 京东实例
- 图片
- 代码
- 图片
<iframe width="160" height="180" frameborder="0" scrolling="no"
src="//chongzhi.jd.com/jdhome-czindex-2017.html"></iframe>
布局
百分比布局(响应式)
采用百分比布局也叫流式布局
不管是PC端还是移动端,各个屏幕的分辨率都不尽相同;页面的宽度就不一样,
开发的PC端盒子宽度1200px,在分辨率为960像素的屏幕就会滚动条;
随着移动设备,智能手机,平板,同样各个分辨率,但是开发的项目要适应各个不同的分辨率,
这时就需要用到响应式布局;
响应式布局:根据设备屏幕分辨率的大小,对当前页面盒子宽度进行调整,
来适应最新的屏幕的布局方式;
媒体查询布局
PC媒体查询
/* screen 屏幕 */
@media screen and (min-width: 1200px) {
/* 屏幕超过1200,生效 */
.box {
background: black;
}
}
@media screen and (min-width: 1250px) {
/* 屏幕超过1200,生效 */
.box {
background: yellow;
}
}
@media screen and (max-width: 800px) and (min-width: 600px) {
/* 屏幕小于800大于600,生效 */
.box {
background: blue;
}
}
Flex布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
加到父元素上
设为Flex布局以后,子元素的float、clear和vertical - align属性将失效。
flex - direction属性决定主轴的方向(即项目的排列方向)。
flex - wrap属性默认情况下,项目都排在一条线(又称”轴线”)上。flex - wrap属性定义,如果一条轴线排不下,如何换行。
justify - content属性定义了项目在主轴上的对齐方式。
align - items属性定义项目在交叉轴上如何对齐。
align - content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
-----------------------------------------------------
项目的属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex - shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex - basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex属性是flex - grow, flex - shrink 和 flex - basis的简写,默认值为0 1 auto。后两个属性可选。
flex: none | [ < 'flex-grow' > <'flex-shrink'>? ||<'flex-basis'> ]
flex: 弹性布局;
display: flex ;加到了父元素上,那么子元素就是一个一个flex成员
flex - direction : row row - reverse column 决定子元素的排列方向
flex - wrap: nowrap: 默认是不换行 wrap: 换行
justify - content属性定义了子元素在主轴上的对齐方式。
justify - content: flex - start | flex - end | center | space - between | space - around;
align - items : align - items属性定义项目在交叉轴上如何对齐。
flex - start | flex - end | center | baseline | stretch;
是设置在item,是每一个子元素上;
order: 数字;默认是0;有了这个按照从小到大的顺序排列;
flex - grow : 按比例分配剩余空间
flex - shrink : 默认都是1;都将等比例缩小;
- ps:可参考其他文章自行理解flex 的详细使用
比如:菜鸟教程Flex
后语
- 如果觉得对您有帮助,可以关注点赞,后续文章更精彩呦