brancelee / html-css Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 0 B

html-css's People

Watchers

html-css's Issues

原生组件

取消文本框黄色背景样式

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px white inset ;
}

自定义select

文本框的下拉箭头图标
select{
background:url(./img/selectPic.png) 95% 50% no-repeat scroll transparent //箭头图片信息，箭头位置
appearance:none //隐藏原来的下拉按钮
}

CSS伪类特效,（先后顺序不能颠倒）
: link 向未被访问的链接添加样式
: hover 当鼠标悬浮在元素上方时，向元素添加样式
: visited 向已被访问的链接添加样式。
: active 向被激活的元素添加样式。

关于浮动的优秀处理

      <div className="showText">
      <div className='log'>
            <span>log</span>
      </div>
          <div className='text'>
          <p>wesdacvieo ajdsapd neir nson oiniacvieo ajdsapd neir nson oiniacvieo ajdsapd neir nson oiniacvieo ajdsapd neir nson oiniacvieo ajdsapd neir nson oiniacvieo ajdsapd neir nson oini </p>
          </div>   
      </div>
      </section>

父子子父，子右，子左：
父整体右偏移marign-left: 300px;
子margin0left:-300px; 再Floate:left

若把两个都浮动了，section 父，将垮掉消失

··················································
另外如果是一行就能显示东西，有时可以考虑text-indent 来调整文本缩进，改变其水平位置

CSS知识

margin: 0 auto ;//模块居中
float: left ; //模块左右排布,三列布局可采用，float: left ; float: left ; float: right; 完成，前提得有宽度

三个模块最好的方法是：
.left{
width:200px;
height:500px;
background-color:#ccc ;
positon:absolute;
left:0; top:0
}

.middle{//宽度自适应
height:500px;
margin:0, 310px, 0, 210px ;
background-color:red;
}

.right{
width:300px;
height:500px;
position:absolute;
top:0;
left:0;
}

[菜单案例 ]
ul{
list-style:none ; //去掉 li 的点
width:100px //条目的宽度
}

a{ // 标签元素无法设置宽和高
text-decoration:none
}
li{
height:30px; lin-height:30px ; width:100px ; background:#ccc ; margin-bottom:1px;
text-indent: 10px //用于文本缩进，调整文本在框中的位置
}

于是乎可将标签改成块元素，就可以搞事
ul li a {
text-decoration:none ; display: block;
height:30px; lin-height:30px ; width:100px ; background:#ccc ; margin-bottom:1px;
text-indent: 10px
}
a :hover {
background-color:red;
color:white;
}


将其文字位置居中使用：line-height:30px 或者2em

https://user-images.githubusercontent.com/37168881/42746004-4e0b6bba-8908-11e8-8613-bdd239032a2b.png

CSS盒子模型问题

margin 两种特殊情况

两个元素是兄弟元素的，第一个元素的margin-bottom与第二个的margin-top 产生叠压时，该两个元素底部和顶部的margin 值会为其二之间的最大值当做margin 距离显示；

<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>

两元素为父子关系，包含与被包含的关系时，子级的元素的margin-top 会传递给父级,并且具有递归性，到最顶级的兄弟块之间产生margin-top.

.div_1{
width: 300px;
height: 300px;
background: cyan;
}
.div_2{
width: 100px;
height: 100px;
background: red;
margin-top:50px;
}

---
<body>
<div class="div_1">
<div class="div_2"></div>
</div>
</body>

此时上条边会重合在一起，距上部50px 的空白，
解决方案：
1：可给需要间隔的那个元素，加上overflow:hidden ,注意margin-top 向上找到第一个overflow: hidden 的元素为间隔参照。

2:给父级设置 padding
3:给父级设置 overflow:"hidden";

4:父元素，position：relative;
子元素， position: absolute;

5 父元素加完整版的 border:border: 1px solid transparent

HTML and CSS 布局和排版

布局和排版
https://blog.csdn.net/xiebin6163/article/details/79039474

垂直居中对齐

<div>
 <img src='picture.image' />
 <span>我要竖直居中</span>
</div>

div{
 display:flex;
 align-items:center;
 width:500px;
 height:300px;
background:red;
}
，
img{
  width:200px;
 height:200px;
 background-size: 50%/*缩放0.5，  cover 自动拉大覆盖 ，使其完全填充背景区，container 自动缩放图
，使其完全填充*/}

浮动元素居中

div{
        width:500px;
        height:300px;
        margin:-150px 0 0 -250px;
        position:absolute;
        left:50%;
        top:50%;
        background-color:#000;
}

内容完全居中

多种完全居中的方法

.container{
height:500px;
position:relative;
}
.content{
position:absolute;
margin:auto;
width:200px;
hight:100px;
top:0;
left:0;
bottom:0;
right:0;
}

Rithm School

CSS Transitions

transition property provides a way to set and control animation speed when changing CSS properties.

a{
background-color: purple ;
padding:10px ;
color: white ;
border-radius: 7px ;
text-decoration: none ;
//设置动画参数
transition: background-color 0.5s , color 0.5s , border-radius 2s ease-out;

a:hover{
background-color: green;
color:black;
border-radius:30px;
}

动图效果

Hello World

CSS伪类

链接的伪类

a:link{color:black }//未访问的链接

a:visited{color:blue} //已访问的

a:hover {color:red } //悬浮

a:active {...} //被选中的链接，可设置颜色

:after 与:before 伪元素,使其运行必须设其，content:"" 属性才能运行，否则伪元素无用。

使用伪类使得文本两端对齐

<div id="text">Hello World </div>

#text{
  width:100px ;
  text-align: justify ;
}

#text:after{
  content:"";
  width:100%;
  display:inline-block;
}

First / Last Children Selector

li:first-child{
...
}

li:nth-child(n){
...
}

li:last-child{
...
}

浮动与包裹

具有包裹性的元素：
display:inline-block / table-cell...
position: absolute / fixed / tricky...
overflow: hidden /scroll...

浮动是魔鬼
浮动后房顶会塌陷下来

浮动是为了实现文字环绕效果

浮动float能把inline-block 变成 block

文字环绕衍生-单侧固定

display ：inline 表示行内元素， block 表示块级元素,
把 li 这个块级元素改写为 inline 行内元素或者 inline-block 行内快元素，制成水平菜单

box-sizing

该属性可以使，不能改变盒子的padding 和 border 的值，可以理解为去掉了该两个属性。
格式：box-sizing: border-box;
考虑浏览器兼容问题的话：