css基础 - jtZby - 博客园

css基础

margin不会对定好的width产生影响，在border外产生白色区域。而padding会把box width撑大，在border内增加白色领域。

div.box
{
box-sizing:content-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
}

定位posiotion:absolute right:-30px 是基于该元素的父级非static定位而言的，如果非static的父级原始width不够而且靠padding-right撑开的像素不够，right:-30px 会失效

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

img{

height:auto;

max-width:100%;

}

padding和margin的相互抵消 padding-top:120% 百分比的基数是基于父元素要靠margin-top: -40%（起点就在botton后接after元素处，所以大约40%足够）;抵消。

padding-top:120% 多出来的20%使得botton后面的元素包括padding-top的20px;在下方露出的长度与botton整个长度一致.否则高度不足以遮挡整个长方形

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top:120%;
    padding-left: 100%;
    margin-top: -40%;
   margin-left: -20px!important;
    opacity: 1;
    transition: all 0.8s
}

.button:active:after {
    transform:translateY(100px);
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>

<h2>按钮动画 - 波纹效果</h2>

<button class="button">Click Me</button>

</body>
</html>

p 块级元素，可定宽高

块级元素 p h1 div 块级元素才有宽高，才有边框Border属性

tranform 变形：translate（120px）平移

transition过渡:width 2s,height 2s,transform 2s

transition: 0.5s;包括一切变化，比如：hover

background: linear-gradient(180deg, red, blue);朝着180度方向。

方向（时钟型）： 0上 90右 180下 -90左

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */

background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));

background-position 图像在其父元素中的位置 20%父元素宽的20% 40%父元素高的40%

background-origin背景图像的位置区域

background-image:url() ,url() 定义多个背景图像

background-size:80px 60px 你指定的大小是相对于父元素的宽度和高度的百分比的大小。

图像拼合技术左负右正上正下负
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 10px;}
往左移动47px 往上移动10px

form中的属性enctype="multipart/form-data" 以multipart/form-data编码格式发送表单数据(只对form表单中 method="post" 表单)
collapse折叠
wrap文本环绕就是换行

允许长文本换行：

word-wrap:break-word;

float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

list-style-position:outside/inside  outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
text-align:justify 无视浏览器窗口大小总是左右两端对齐外边框

text-align   文字水平方向对齐   h1,p在包含它的元素中的位置；表格中的文本对齐。
                文字垂直方向对齐    line-height:100%
vertical-align属性设置一个元素的垂直对齐。垂直对齐图像；表格中的垂直对齐属性
想要元素居中对齐
1.                             2.css3 弹性盒子flex

<!DOCTYPE html>
<html>
<head>
<style>
    #div1{
        width:300px;
            height:400px;
    background-color:#ddd;
    position:relative;
    }
        #div2{
                position:absolute;
            top:50%;
            left:50%;
            margin-left:-125px;
            margin-top:-150px;
            width:250px;
            height:300px;
        background-color:yellow;

    }
    p{
    vertical-align:bottom;}
</style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <h3>1111</h3><p>nnnnnnn</p>
    </div>
    </div>
 
</body>
</html>

.marked p（全部p元素后代）和.marked > p（仅仅选择儿子）

css中li横向排列并且清除空白间隙（这是因为我们写代码时候的换行符所致demo1，如果li代码前后没有空白，则不会产生空格间隙demo2）

解决方法：1 父元素如ul样式font-size:0px;子元素li 样式font-size：18px；

2.父元素ul 样式word-spacing:-5px;

ul
{
list-style-type:none;
margin:0;
padding:0;
font-size:0px;
}
li
{
font-size:18px;
background:red;
display:inline;
}

demo1:

	ul{
		font-size:0px;
	}
li{display:inline-block;
	background-color:yellow;
	font-size:14px;
	}

</style>
</head>
<body>

<p>Display this link list as a horizontal menu:</p>

<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

demo2:

<!DOCTYPE html>
<html>
<head>
<style>
	ul{

	}
li{display:inline-block;
	background-color:yellow;
	font-size:14px;
	}

</style>
</head>
<body>

<p>Display this link list as a horizontal menu:</p>

<ul>
	<li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li>
</ul>

</body>
</html>

position:relative 未脱离文档流即使相对其正常位置已经移动，空间仍然存在。

相对定位元素经常被用来作为绝对定位元素的容器块。

对定位的元素的位置相对于最近的已定位父元素（非static的元素），如果元素没有已定位的父元素，那么它的位置相对于<html>:

Absolutely定位使元素的位置与文档流无关，因此不占据空间。Absolutely定位的元素和其他元素重叠。

posted on 2016-06-07 15:23 jtZby 阅读(252) 评论(0) 收藏举报

刷新页面返回顶部