html+css实例

手机适配 问题:一个图片比较大或者比较小，怎么适配手机怎么优化?

https://blog.csdn.net/rj_jqd/article/details/8651251

 

一个p标签，不换行，超出部分显示为省略号？

p{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

 

如何找到所有 HTML select 标签的选中项？

$('[name=selectname] :selected')

 

css实现字体大写？

<html>

  <head>

    <style type="text/css">

      p.uppercase {text-transform: uppercase};//大写

      p.lowercase {text-transform: lowercase};//小写

      p.capitalize {text-transform: capitalize};//首字母大写

    </style>

  </head>

  <body>

<p class="uppercase">This is some text in a paragraph.</p >

    <p class="lowercase">This is some text in a paragraph.</p >

    <p class="capitalize">This is some text in a paragraph.</p >

  </body>

</html>

 

 

用一个div模拟textarea的实现

<style>
#textarea {
height: 200px;
width: 300px;
padding: 4px;
border: 1px solid #888;
overflow: auto;
}
</style>
</head>
<body>
<div id="textarea" contenteditable="true"></div>
</body>

 

 

纯css画三角形?

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242

 

一个背景图的线性渐变?

.box {

width: 100px;

height: 100px;

background-image: linear-gradient(to right, red, blue);

}

 

 

一个满屏品字布局如何设计?

第一种真正的品字：

  1. 三块高宽是确定的；
  2. 上面那块用margin: 0 auto;居中；
  3. 下面两块用float或者inline-block不换行；
  4. 用margin调整位置使他们居中。

第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

 

圣杯布局和双飞翼布局？

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542

 

如何让一个不定宽高的盒子水平垂直居中？

定位的方式

.father {

    position: relative;

}

.son {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

}

css3属性

.father {

    position: relative;

}

.son {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

flex布局

.father {

    display: flex;

    justify-content: center;

    align-items: center;

}

 

让大div里面的小div水平垂直都居中

<div class=”parent”>

<div class=”child”></div>

</div>

①相对/绝对定位法

.parent{

position:relative;

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

postion: absolute;

top: 50%;

left: 50%;

width:100px;

height: 100px;

margin-top: -50px;

margin-left: -50px;

border: 1px solid violet;

}

注意点：使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.

②利用定位及margin:auto实现

.parent{

position:relative;

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

position: absolute;

top: 0;

left: 0;

right: 0;

botton: 0;

/*width:100px;

height: 100px;*/

margin: auto;

border: 1px solid violet;

}

实现原理：设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;

优点：可不用知道子div的高宽

③使用dosplay:table-cell

.parent{

display: table-cell;

width: 300px;

height: 200px;

border: 1px solid red;

vertical-align: middle;

text-align: center;

}

.child{

width: 100px;

heiht: 100px;

border: 1px solid violet;

}

实现原理：display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.

组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中（也就是将内部的元素设置display:inline-block）

④使用弹性布局display:flex

.parent{

display: flex;

width: 300px;

height: 300px; 

border: 1px solid red;

justify-content: center;

align-items: center;

}

.child{

width: 100px;

height: 100px;

border: 1px solid violet;

}

⑤计算四周的间距设置子元素与父元素之间的margin-top和margin-left;

.parent{

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

width: 100px;

height: 100px;

margin-top: 50px;

margin-left: 100px;

}

 

三栏布局：假设高度已知，其中左栏、右栏宽度各位300px，中间自适应？
<style type=”text/css”>
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
①浮动方法
<section class=”layout float”>
<article class=”left-right-center”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”>
<h1>浮动解决方案</h1>
这是三栏布局中间部分
</div>
</ article >
</section>
<style type=”text/css”>
.layout.foat .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yelleow;
}
</style>
②绝对定位方法
<section class=”layout absolute”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>绝对定位解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.absolute .left-center-right{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
③flex布局方法
<section class=”layout flexbox”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>flex布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.leftbox .left{
width: 300px;
background: red;
}
.layout.felxbox .cneter{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
④表格布局方法
<section class=”layout table”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>表格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.table .left-center-right{
display: table;
width: 100%;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
widht: 300px;
backgorund: blue;
}
</style>
⑤网格布局方法
<section class=”layout grid”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>网格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
每个布局方案的优缺点：
浮动布局： 缺点：脱离文档流（需要清楚浮动以及处理好浮动周边的关系）；
优点：兼容性较好
绝对定位： 缺点：布局脱离文档流，使得其子元素也必须脱离文档流，导致其有效性和可用性比较差；
优点：快捷，配合JS使用非常快也不容易出问题
flex布局： CSS3主要解决上述两种布局的缺点，比较完美，用于移动端；
表格布局： 缺点：当其中一个单元格高度超出的时，其他高度也会变化； 
优点：方便，兼容性好
网格布局： 新技术，使布局不再是模拟网格布局，可以做很多复杂的事情但代码量能减少很多
补充：如果中间内容高于容器高度，flex和table布局可用

扩展：三栏布局
左右宽度固定，中间自适应
上下高度固定，中间自适应
两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应

一个块级元素的水平居中，你有哪几种方式可以实现？使用flex让元素水平居中有做过吗？
①.子绝父相
<style>
.father{
position:relative;
width:400px;
height:400px;
background:blue;
}
.son{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background:red;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
注意：外层div要设定高度和宽度
缺点：当子元素宽高大小不是偶数时，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。会导致子元素内部字体边缘模糊。
transform:translate (-50%,-50%) 造成的文字边缘模糊解决方案 https://www.aliyun.com/jiaocheng/639148.html
②.父元素弹性布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
display: flex;
width: 400px;
height: 400px;
background: red;
justify-content: center;
/*x轴对齐方式*/
align-items: center;
/*y轴对齐方式*/
}
.son {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

 

常用布局方式有哪些，它们各有什么特点？

静态布局、自适应布局、流式布局、响应式布局、弹性布局的区别？

https://www.cnblogs.com/yanayana/p/7066948.html

https://blog.csdn.net/xuehu837769474/article/details/80412099

 

 

posted @ 2019-05-25 10:18  一粒一世界  阅读(1889)  评论(0)  编辑  收藏  举报