html+css
爱写日记的仙女
仙女
展开
-
css元素隐藏的方法总结
这是面试腾讯2020校招面试的时候遇到的问题1.visibility: hidden;2.display: none;相同点:都是隐藏标签,对应的标签仍存在DOM结构中不同点:标签设置display: none后,不会占据该标签原来所在的位置,会触发重流。标签设置visibility: hidden后,仍占据原来的位置,会触发重绘。联想:v-if和v-show相同点:都可以控制标...原创 2019-11-19 17:26:09 · 142 阅读 · 0 评论 -
CSS3 @font-face详解与优化
CSS3 @font-face 规则css通常用font-family我们都知道,在网页制作中,会经常用到不同的字体,常用的有 微软雅黑、宋体、Aria 等等。在我们写css的样式的时候,通过 font-family 可以指定元素的字体名称。CSS3 @font-face自定义字体如果是 特殊字体 ,因为我们的电脑没有安装那个字体,所以在网页中显示不出来,所以我们通过 @font-face...原创 2019-11-07 15:15:41 · 310 阅读 · 0 评论 -
布局总结
1.总体高度一定,左右定宽,实现中间自适应方法:利用flex布局flex-direction属性决定主轴的方向,默认row(默认值):主轴为水平方向,起点在左端flex-wrap属性默认情况下,项目都排在一条线(又称”轴线”)上。nowrap(默认):不换行。justify-content属性定义了项目在主轴上的对齐方式。flex-start(默认值):左对齐align-ite...原创 2019-03-22 09:30:08 · 135 阅读 · 0 评论 -
居中方法总结
居中分为水平居中和垂直居中1、水平居中1)行内元素居中行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素,可通过给父元素设置 text-align:center 来实现。另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响,否则一切都是无用功。<template&...原创 2019-03-22 09:40:28 · 769 阅读 · 0 评论 -
margin为负值详解
一、对元素自身的影响1.margin-left,margin-right为负值1)元素本身没有宽度,会增加元素宽度<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>验证</title> &...原创 2019-03-27 10:34:18 · 21033 阅读 · 10 评论 -
谷歌浏览器不支持小于12px的解决方案
面试字节跳动的时候遇到了如何解决谷歌浏览器小于12px的字体无法显示的问题,于是回来自己尝试了一下<body> <div class="a">我是20px</div> <div class="b">我是16px</div> <div class="c">我是12px</div> &...原创 2019-07-23 16:42:27 · 268 阅读 · 0 评论 -
flex布局(入门)
flex布局弹性盒子布局, CSS3 的一种新的布局模式容器属性flex-directionrow盒子的排列方向,默认为横向,起点为左row-reversecolumn盒子纵向排列,起点为上column-reverseflex-wrap盒子换不换行默认不换行nowrapwrap 换行,且第一行在上面wrap-reverse换行,第一行在下面可以利用换行属性实现一行...原创 2019-07-23 17:26:34 · 151 阅读 · 0 评论