仿写京东过程中经常碰到的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
文本不被选中
- 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);
修改框里的内容
: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; 并没有受父元素的影响，可以继续显示出来。
自身绑定的事件是否能继续触发(消失时）
- 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
是否支持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.zhufengpeixun.cn" target="iframe_a">zhufengpeixun</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

如果觉得对您有帮助，可以关注点赞，后续文章更精彩呦

宅男呀

发布了51 篇原创文章 · 获赞 13 · 访问量 3065

私信关注

仿写京东之巨详细CSS知识点加Html布局

仿写京东过程中经常碰到的CSS问题

CSS

常用属性

单行文本出现省略号的条件（面试题）

多行文本省略的条件

背景图

让原素消失的属性

input

innput行内默认字

vertical-align 属性设置元素的垂直对齐方式。

定义层级：z-index配合position使用

取消默认事件

visibility 属性规定元素是否可见。

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

回流（reflow）和重绘（repaint）

京东三角形

层叠顺序

遮罩层after

css的calc函数

SVG 意为可缩放矢量图形（Scalable Vector Graphics）

HTML 嵌套网页 - Iframe

布局

百分比布局（响应式）

媒体查询布局

Flex布局

如果觉得对您有帮助，可以关注点赞，后续文章更精彩呦

猜你喜欢

仿写京东之巨详细CSS知识点加Html布局

仿写京东过程中经常碰到的CSS问题

CSS

常用属性

单行文本出现省略号的条件（面试题）

多行文本省略的条件

背景图

让原素消失的属性

input

innput行内默认字

vertical-align 属性设置元素的垂直对齐方式。

定义层级：z-index配合position使用

取消默认事件

visibility 属性规定元素是否可见。

CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

回流（reflow）和重绘（repaint）

京东三角形

层叠顺序

遮罩层after

css的calc函数

SVG 意为可缩放矢量图形（Scalable Vector Graphics）

HTML 嵌套网页 - Iframe

布局

百分比布局（响应式）

媒体查询布局

Flex布局

如果觉得对您有帮助，可以关注点赞，后续文章更精彩呦

猜你喜欢

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析