福建漳州网站建设费用wordpress手机端如何使用

当前位置： 首页 > news >正文

福建漳州网站建设费用,wordpress手机端如何使用,一个网站怎么做聚合,扁平化 公司网站1、css选择器及其优先级 标签选择器: 1类选择器、属性选择器、伪类选择器#xff1a;10id选择器#xff1a;100内联选择器#xff08;style“”#xff09;#xff1a;1000!important#xff1a;10000 2、display的属性值及其作用 属性值作用none元素不显示#xff0c…1、css选择器及其优先级 标签选择器: 1类选择器、属性选择器、伪类选择器10id选择器100内联选择器style“”1000!important10000 2、display的属性值及其作用 属性值作用none元素不显示并会从文档流中移除flex子元素根据flex布局方式进行布局block块类型。默认宽度父级元素的宽度高度不默认。可设置宽高相邻相同属性换行显示inline行内元素类型。默认宽度为内容的宽度不能设置宽高同行显示inline-blockblock和inline的结合宽度默认内容的宽度。可设置宽高换行显示list-item像块元素一样显示并添加样式列表标记table作为块级表格来显示inherit继承父级display属性来显示 3、display的block、inline和inline- block的区别 block 会独占一行宽度默认父级的宽度高度默认内容的高度。多个相同属性的元素换行可以设置宽高、padding、margin属性。inline 同行显示宽度和高度默认内容的宽高。不能设置宽高可以设置水平位置的padding和margin但不能设置垂直位置的padding和margin。inline-block同行显示宽度和高度默认内容的宽高。可以设置宽高可以设置padding和margin。 4、隐藏元素的方法有哪些 display:none DOM树种不含有该元素不能绑定监听事件。visibility:hidden元素不可见但是元素在页面任占有空间不会影响绑定的监听事件。opacity:0只是将透明度降为0实现隐藏不影响原先的监听事件。position:absolute使用绝对定位将元素移动到可视范围外实现元素的隐藏。translate使用位移将元素移动到可视区域外实现隐藏。z-index使用其他元素盖住该元素实现隐藏。transform:scale(0,0) 将元素缩放为0实现隐藏。slip/slip-path使用剪切实现隐藏不会影响绑定的监听事件。 5、display:none 和 visibility:hidden的区别 渲染树display:none 在渲染树种不存在渲染时不会占用空间visibility:hidden渲染树中还存在只是内容不可见。继承性设置了display:none 的元素的子元素会一起消失没有继承性。visibility:hidden的子元素继承了visibility:hidden的属性单独设置子元素的visibility: visible可以让子元素显示。是否重排重绘修改display的属性会造成重排而修改visibility只会造成重绘。 6、对盒模型的理解 标准盒模型的width和height属性是content 的宽高也就是设置width和height改变的是content的大小其他的不改变。IE盒子模型的width和height属性包含 content、padding、border的宽高设置width和height之后content、padding、border会自动计算。 可以通过一下方法改变盒子模型 box-sizing: content-box 表示标准盒模型默认box-sizing: border-box 表示IE盒子模型 7、css3中有哪些新特性 8、单行、多行文本溢出隐藏 单行文本溢出 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;多行文本溢出 overflow: hidden; /溢出隐藏/ text-overflow: ellipsis; /溢出显示省略号/ display: -webkit-box; /作为弹性伸缩盒子模型显示/ -webkit-box-orient: vertical; /弹性伸缩盒子模型排列方式为垂直排列/ -webkit-line-clamp: 3; /显示的行数/不能设置高度否则显示的内容就按设置的高度显示。 9、两栏布局的实现 一般两栏布局指的是左边一栏宽度固定右边一栏宽度自适应 HTML结构 div classouterdiv classleft左边固定200px/divdiv classright右边自适应宽度/div/div公共的样式: div {height: 200px; } .left {width: 200px;height: 150px;background-color: red; } .right {background-color: green; }方法一 使用 float margin .left {float: left; } .right {margin-left: 200px; }方法二 左边浮动右边加上overflow:hidden 触发了BFC两侧就不会重叠。 .left {float: left; } .right {overflow: hidden; }方法三 利用flex布局左边固定宽度右边flex:1自动填满宽度。 .outer {display: flex; } .left {} .right {flex: 1; }方法三 利用flex布局左边固定宽度右边flex:1自动填满宽度。 .outer {display: flex; } .left {} .right {flex: 1; }方法四 利用绝对定位 margin。左边使用absolute右边使用margin-left .outer {position: relative; } .left {position: absolute; } .right {margin-left: 200px; }方法五 同样的使用绝对定位左边固定高度右边适应绝对定位。 .outer {position: relative; } .left {} .right {position: absolute;left: 200px;top: 0;right: 0;bottom: 0; }10、三栏布局的实现 三栏布局一般指的是页面中一共有三栏左右两栏宽度固定中间自适应的布局 HTML结构 div classouterdiv classleft左边固定100px/divdiv classcenter中间自适应宽度/divdiv classright右边边固定200px/div/div公共的样式: div {height: 200px; } .left {width: 100px;background-color: red; } .center {height: 300px;background-color: gold; } .right {width: 200px;background-color: green; }方法一 使用flex布局左右两边固定高度中间使用flex:1自动撑开宽度 .outer {display: flex; } .center {flex: 1; }方法二 使用绝对定位左边定位到左边右边定位到右边中间设置margin进行隔开 .outer {position: relative; } .left {position: absolute; } .center {margin-left: 100px;margin-right: 200px; } .right {position:absolute;right: 0;top: 0; }方法三 使用浮动左边左浮动右边右浮动中间设置相应的margin值注意这种方式center的元素必须放到最后否则center会将right挤到下方 .left {float: left; } .center {margin-left: 100px;margin-right: 200px; } .right {float: right; }方法四 圣杯布局。父级设置左右两边的padding值留空给两边位置中间放在最上面宽高设为父级的宽高因此元素被挤到下一行使用margin移动到上一行在使用定位和浮动定位到两边 .outer {padding-left: 100px;padding-right: 200px;background-color: black; } .left {position: relative;left: -100px;float: left;margin-left: -100%; } .center {float: left;width: 100%;height: 100%; } .right {position: relative;left: 200px;float: right;margin-left: -200px; }方法五 双飞翼布局。相对于圣杯布局来说center是通过margin预留两边的位置的两边的margin就相当于center的翅膀。 div classouterdiv classcenter-wrapperdiv classcenter中间自适应宽度/div/divdiv classleft左边固定100px/divdiv classright右边边固定200px/div/div.outer {background-color: black; } .left {float: left;margin-left: -100%; } .center-wrapper {float: left; width: 100%;height: 100%; } .center {margin-left: 100px;margin-right: 200px; } .right {float: left;margin-left: -200px; }11、水平垂直居中的实现 公共样式 .parent {width: 500px;height: 500px;background-color: lightblue;}.child {width: 100px;height: 100px;background-color: gold;}方法一 利用flex进行布局。 .parent {display: flex;justify-content: center;align-items: center;}方法二 使用position和tanslate进行配合实现居中。 .parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}方法三 利用绝对定位将四个方向设置为0再通过margin:auto实现居中这种方法只适用于盒子由宽高的情况下。 .parent {position: relative;}.child {position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}方法四 利用绝对定位和margin来调整居中这种适合于盒子已知宽高的情况。 .parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}方法五 利用绝对定位和calc来计算位置居中这种适合于盒子已知宽高的情况。 .parent {position: relative;}.child {position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);}12、对flex布局的理解及其使用场景 FLex是FlexibleBox的缩写意为弹性布局。可以使盒模型具有很大的灵活性。任何一个容器都可以指定为flex布局。行内元素也可以使用FLex布局。采用FLex布局的元素称为FLex容器FLex container它的所有子项目自动成为容器的成员称为FLex项目FLex Item。容器默认存在两根轴水平主轴main axis和垂直的交叉轴cross axis项目默认沿水平主轴排列。注意设置为FLex布局之后子元素的float、clear和vertical-align属性失效。 以下6个属性设置在容器上 flex-direction设置主轴的方向flex-wrap定义一条轴线排不下是否换行flex-flow属性是flex-direction和flex-wrap的简写默认值是row nowrapjustify-content定义主轴上的对其方式align-items定义交叉轴上的对其方式align-content定义多根轴线的对其方式只有一根轴线的时候不起作用 以下6个属性设置在项目上 order定义项目的排列顺序。数值越小排列越靠前。flex-grow定义项目的放大比例。默认0即如果存在剩余空间也不放大。flex-shrink定义项目的缩小比例。默认1即如果空间不足该项目也不会缩小。flex-basis定义在分配多余空间之前项目占据的主轴空间。浏览器根据这个属性计算是否还有多余空间。默认auto即项目本来的大小。flex属性flex-grow、flex-shrink、flex-basis的简写。即0 1 autoalign-self属性允许单个项目有与其他项目不一样的对其方式可覆盖align-itens的属性默认auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。 13、为什么需要清除浮动清除浮动的方式 浮动不设高度且子元素浮动时容器高度不能被内容撑开内容会溢出到容器外面而影响布局这种现象被称为浮动。 具有以下特点 浮动元素脱离文档流不占据空间引起“高度塌陷”现象浮动元素碰到包含它的边框或者其它浮动元素的边框停留 浮动元素引发的问题 父元素的高度无法被撑开影响与父元素同级的元素与浮动元素同级的非浮动元素也会跟随其后浮动之后的元素会发生变化影响页面的显示结构 清除浮动的方式如下 给父级定义一个高度height属性包含浮动元素的父级标签添加overflow:hidden或者overflow:auto最后一个浮动元素之后添加一个空的div标签并添加clear:both样式使用clear:both和:after伪元素由于IE6-7不支持:afterIE使用zoom:1 .parent::after {content: ;display: block;clear: both; } .parent { zoom: 1; }14、对BFC的理解如何创建BFC BFCBox Formatting Context块级上下文格式化是一块渲染区域里面包含多个box。是一个独立的布局环境可以理解为一个容器在这个容器里面按照一定的规则进行物品排列并且不会影响其他环境中的物品也不受外部影响。 创建BFC的条件 根元素body元素设置浮动float除了none以外的值元素设置绝对定位positionabsolutefixeddisplay值为inline-blocktable-cell、flex等overflow值为hidden、auto、scroll BFC的特点 容器内的元素不会影响容器外的元素BFC中两个上下相邻的容器margin会重叠BFC区域不会和浮动元素发生重叠每个元素的左margin值和容器的左border相接触计算BFC的高度时需要计算浮动元素的高度 BFC的作用 解决margin重叠的问题解决高度塌陷的问题对子元素设置浮动后父元素会发生高度塌陷的问题。将父元素变成一个BFC常见的办法是给父元素设置overflow:hidden可以解决这个问题 15、position的属性有哪些区别是什么 absolute 生成绝对定位元素相对与static以外的父元素进行定位。通过top、right、bottom、left进行定位。relative生成相对定位元素相对于原来的位置进行定位。保留原来的位置通过top、right、bottom、left进行定位。fixed生成绝对定位元素元素相对于屏幕视口viewport的位置指定位置。屏幕在滚动时位置不会改变比如回到顶部的按钮大多用此方法。static默认值没有定位。inherit继承父元素的position值。 16、实现一个三角形 用border生成一个正方形 div {width: 0;height: 0;border: 100px solid;border-color: red green blue gold; }生成向下的三角形 div {width: 0;height: 0;border-left: 100px solid transparent;border-top: 100px solid red;border-right: 100px solid transparent; }生成对角的三角形 div {width: 0;height: 0;border-left: 100px solid red;border-top: 100px solid red;border-right: 100px solid transparent;border-bottom: 100px solid transparent; }17、如何解决1px的问题 这个问题主要出现在不同devicePixelRatio之间的屏幕同样是1px有些屏幕看起来会更粗。 方法一 先得出设备的devicePixelRatio根据该值计算mata标签中的值。 const scale 1 / window.devicePixelRatio; // 这里 metaEl 指的是 meta 标签对应的 Dom metaEl.setAttribute(content, widthdevice-width,user-scalableno,initial-scale\({scale},maximum-scale\){scale},minimum-scale${scale});方法二 直接改成0.5px 18、li与li之间的空白是由什么引起的如何解决 原因 浏览器会把inline内联元素之间的空白字符空格、换行、tab等渲染成一个空格。为了美观我们在写代码的时候通常是把li标签换行书写把li设置成inline之后产生的换行符被渲染成了空格占用一个字符的长度。 解决办法 既然是换行产生的那么就不换行书写写成一行。不足不美观给li设置float:left不足有些元素是不能浮动的如做鱼切换的焦点图等将ul的字符大小设为0即font-size: 0不足li需要单独设置字符大小设置ul的字符间隔letter-spacing:-8px不足li之间的字符间隔也被设置文字重叠在一起所以li的字符间隔还需要设置成letter-spacing:normal 19、flex:1 代表什么 flex代表flex-grow、flex-shrink和flex-basis的简写默认值是 0 1 auto。含义就是当Item的总宽度超过父级的宽度的时候item进行等比例缩小。 先解释一下flex-grow、flex-shrink和flex-basis三个属性的含义。 flex-grow .item {flex-grow: number; / default 0 / }默认值为0表示不自动放大元素。当还有剩余空间的时候没有剩余空间设置该属性不生效多个item设置flex-grow的值大于0 的时候那么各个item的宽度根据设置的大小按比例放大。
flex-shrink .item {flex-shrink: number; / default 1 / } 表示缩放比例。该值的计算方法稍微有点绕建议阅读这篇文章https://c.biancheng.net/css3/pseudo-class.html flex-basis .item {flex-basis: length | auto; / default auto */ }属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。 它可以设为跟width或height属性一样的值。 flex:1 代表 1 1 0% 表示在剩余空间多余的情况下会自动方法空间不足的时候也会自动缩小。 画一条0.5px的线 使用transform:scale(0.5,0.5)的方式缩放。