Ⅰ WEB前端怎么布局
在谈WEB前端怎么布局前，我们先梳理前端的布局类型，具体有以下几种：
1.静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2.流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
3.自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4.响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
那么我们如何布局呢？通过以下几点来选择布局。
1.如果只做电脑端，最好的选择是静态布局。
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，通过一份css+一份js调节font-size就搞定。
3.如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
Ⅱ Web前端面试之css高频面试题
今天小编要跟大家分享的文章是关于web前端面试之css高频面试题。想要参加web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
1.什么是BFC机制
BFC(BlockFormattingContext)，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
·___シ⑻跫(以下任意一条)
§_loat的值不为none
§_verflow的值不为visible
§_isplay的值为table-cell、tabble-caption和inline-block之一
§_osition的值不为static或则releative中的任何一个
在IE下,Layout,可通过zoom:1_シ
·___FC布局与普通文档流布局区别:
BFC布局规则:
1._浮动的元素会被父级计算高度(父级元素触发了BFC)
2._非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3._margin不会传递给父级(父级触发BFC)
4._属于同一个BFC的两个相邻元素上下margin会重叠
5._普通文档流布局:浮动的元素是不会被父级计算高度
6._非浮动元素会覆盖浮动元素的位置
7._margin会传递给父级元素
8._两个相邻元素上下的margin会重叠
·___⒅械挠τ
§_柚_argin重叠
§_梢园《亍宄诓扛《(清除浮动的原理是两个div都位于同一个BFC区域之中)
§_允视α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的选择器以及属性
这里只是列出来,具体的使用,请查看我的关于css3新增选择器与属性文章
·___粜匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性选择器
含义描述
E[att^="val"]
属性att的值以"val"开头的元素
E[att$="val"]
属性att的值以"val"结尾的元素
E[att*="val"]
属性att的值包含"val"字符串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
选择器
含义描述
E:root
匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)
与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
·___ss3新增属性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性
含义描述
兼容
transition
设置过渡效果
transform
变换效果(移动、缩放、转动、拉长或拉伸)
animation
动画效果
box-shadow
阴影效果
FF3.5,Safari4,Chrome3
text-shadow
文本阴影
FF3.5,Opera10,Safari4,Chrome3
border-colors
为边框设置多种颜色
FF3+
boder-image
图片边框
FF3.5,Safari4,Chrome3
text-overflow
文本截断
IE6+,Safari4,Chrome3,Opera10
word-wrap
自动换行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圆角边框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的组成模式
FF3+,Opera10,Safari4,Chrome3
outline
外边框
FF3+,safari4,chrome3,opera10
background-size
不指定背景图片的尺寸
safari4,chrome3,opera10
background-origin
指定背景图片从哪里开始显示
safari4,chrome3,FF3+
background-clip
指定背景图片从什么位置开始裁切
safari4,chrome3
rgba
基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___骄又
1._行内元素:_ext-align:center
2._块级元素:_argin:0auto
3._绝对定位和移动:_bsolute+transform
4._绝对定位和负边距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素为单行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和负margin
·___酱怪本又_HAPE*MERGEFORMAT
1.已知元素宽高:绝对定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素宽高:_远ㄎ+负margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父级的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句话就可以实现不定宽高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮动有哪些方法,各有什么优缺点
·___褂_lear属性的空元素
在浮动元素后使用一个空元素如
Ⅲ 如何把web前端网页做成自适应
1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
Ⅳ 前端画三角形只有边线
是的。
画三角形代码原理采用的是均分原理。 在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分 如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。
Ⅳ web前端开发，怎么处理css3中边框倒角属性
CSS3 使用border-radius属性设置圆角效果
该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：
none，默认值，表示元素没有圆角效果
length，由浮点数字和单位标识组成的长度值
%，由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。
例1：利用整数来实现圆角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。
例2：查看下列CSS代码。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。
因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。请同学们根据这样的方法，理解一下组（3）的圆角含义。
组（4）就设置了一个数据，这表示四个方向的角半径均为10px。
二、独立设置元素的四个圆角效果：
若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均为25px。
方法1：利用border-radius属性统一设置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius属性的派生子属性设置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属性的派生子属性设置左下角没有圆角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
Ⅵ 前端如何实现点击评论，弹出一个框啊，而且是带三角的
想简单就是做一个带三角的评论框背景图，然后在评论里面写一个div，背景放这张图，绝对定位到评论的下方，div里面放一个input；
具体样式自己弄；
然后就是通过JS来实现点击评论显示出评论框；
$(".pinglun").click(function(){
$("plDialog").show()
})
Ⅶ 前端编程：在页面绘制三角形
div+css画三角形代码原理采用的是均分原理。
在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。
Ⅷ 各位web前端开发的大神们，问一下，仅div+css如何实现，点左边导航栏，右边出现内容
正常来讲js、jquery都可以实现的
但是要用html 和css来做的话 需要使用到框架
<html>
<framesetcols="25%,50%,25%">
<framesrc="frame_a.htm"/>
<framesrc="frame_b.htm"/>
<framesrc="frame_c.htm"/>
</frameset>
</html>
Ⅸ web前端开进入浏览器怎么设置
web前端开进入浏览器设置第一步就是和服务器建立连接send和rec之间。
等待浏览器发送请求，拿到数据解析，http报文，返回给客户端知道了用户请求后，服务器在特定的目录中找到文件，read出来（文件操作），拿到数据，把数据组织成http返回报文，返回前端即可。
Ⅹ 在web前端里,用css怎么实现半角的效果
如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arial; font-size:14px; }
#menu a , #menu a:visited{ float:left; display:block; position:relative; background:#c00;color:#fff; text-decoration:none; padding:6px ; margin:1px 0 0 1px ; }
#menu a span{ height:0; width:0; border-bottom:6px solid #c00; border-left: 6px solid #fff; position:absolute; top:0;left:0; overflow:hidden;}
#menu a:hover{ color:#333; background:#f90;}
#menu a:hover span{ border-bottom:6px solid #f90;}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>