前端

html css css3 js 前端知识总结*

转载:原文链接:https://blog.csdn.net/qq_42179526/article/details/81089453
块级元素与内联元素:
简单而言,块级元素就是第一个元素在第一行 第二个元素就从第二行开始,内联元素是所有元素都在一行,下面是display的几个属性解释。

1、display:block就是将元素显示为块级元素。

block元素的特点是:
  总是在新行上开始;
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

2、display:inline就是将元素显示为内联行内元素。

inline元素的特点是:
  和其他元素都在一行上;
  高,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
3、display:inline-block将对象呈递为内联块级对象。

display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

inline-block的元素特点:

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

1.背景图片的位置以及大小调整:

<背景图片的插入> :在css中直接用body{background(-imag): url( ) }进行插入即可,同时要注意在css中p body h 等元素都是直接接括号。

<一些常用属性> :

图像在水平方向上平铺:background-repeat:repeat-x;

图像不平铺:background-repeat:no-repeat;

图像大小:background-size :100px(宽) 100px(高);
:cover (图片完全覆盖背景区域);
:25%(背景图片重复4张);
:50%(宽占一半) 100%(高占满背景图片框架);
图像位置:background-position :center/right center;
:50%(水平位置) 50% (垂直位置);左上角为0% 0%,右下角为100% 100%;
:10px(水平方向像素) 20px(竖直方向像素);
:inherit(继承父元素的位置);
这里说下boder-image属性:

border-image-source: url( );
border-image-slice: 50% 50%;(图像的边界向内偏移)
border-image-width: 30  30;(图像边界的宽度)
border-image-outset: 20px 20px 20px 20px( 边框上下左右离内部的距离)
border-image-repeat: stretch
(默认值,拉伸图像来填充) /repeat(平铺)/round(缩放图像;来适应区域)

3.有特别效果的属性

<给盒子添加阴影边框>

基本格式:

box-shadow:10px (向右边移动的阴影 ) 10px(向下边移动的阴影) 10px(虚化的距离) 10px(阴影大小)#888888(颜色) inset(从左上角开始阴影)
再加一些hover属性就比较好看了,如果把背景调暗一点,边框阴影再用个亮点的颜色会有一种荧光的效果,我有一次的网页用的画布做的星星动态背景,然后加的这个效果感觉还蛮有意思的:
在这里插入图片描述
4.html字体及文本格式:

在网页中一般要用中文,这里要在<head>中添加一个解码标签(一般添加utf-8),防止出现乱码:

先列举一些基本的标签:

<b> 粗体,是html自带的加粗,一般可以用font-wegiht属性来直接调整到你想要的加粗程度

<big> <small> 字号大小设置,也是html自带的标签,可以用css的font-size来设置
<ins> 插入字
<del> 删除字
<em> 着重字
<br> 换行,等效的调整行之间的距离,可用line-height来设置
<hr/> 创建水平线,这里html里面没有直接添加竖直线的标签,一般用

或者boder的边框来设置:

<style>
.box{
    border-left: 1px solid #CCCC99;*/上边框/*
    border-right: 1px solid #CCCC99;*/右边框/*
    border: 1px solid black;*/整个边框/*
}
</style>
<div class="box"> </div>
<table style="height:60px;border-color:000000;border-left-style:solid;border-width:1px"><tr><td valign="top"></td></tr></table>

文本对齐:text-align:center/left/right/justify(每行宽度相等,左右外边距对齐;

字体大小设置:font-size:10px/10em
这里说一下px像素和em的区别:(这个链接讲的比较清楚:https://www.cnblogs.com/leejersey/p/3662612.html

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,

  1. IE无法调整那些使用px作为单位的字体大小,像素px是相对于显示器屏幕分辨率而言的;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

text-decoration:overline 文字上部分的线

                        line-through文字中间的划线

                        underline文字下面的划线

                        none去下划线

text-transform:uppercase 全部大写

                       lowercase 全部小写

                       capitalize 每个单词第一个字母大写

text-indent :50px 第一行文本缩进

letter-spacing:字符间距

line-height: 行高

word-spacing 单词之间的空白

white-space:nowarp 禁用文字环绕

6.优先级问题:

元素样式优先级从低到高排序:

通用选择器(universal selector),用通配符表示,如 * {boder:0px solid black}

元素选择器(element selector),如 div {boder:0px solid black}

类、属性或者伪类选择器,如 .c10 {boder:0px solid black},:hover {…}

ID选择器,如#i100 {boder:0px solid black}

HTML元素的style属性

加了 !important的规则,如 #i100{border:6px solid black !important;}
7.opacity与rgab设置透明度的区别

首先,opacity是css3的属性,ie低版本不支持,ie支持RAGB透明效果,ragb(a,b,c,0.1)前面三个为rgb的颜色值,最后一个为透明度。

opacity 是元素透明,而子元素也都透明,如:div在红色背景透明度为0.5,可是div里的文字也变得透明,而用RGAB实现透明效果,只改变元素本身的透明效果,文字没有变透明。

关于配色的的网站:https://encycolorpedia.cn/ab5585

十六进制颜色名转rgb:http://www.yuangongju.com/color

选择器的优先级从低到高:

浏览器提供的默认样式表。
用户自己加的样式表(PS:什么意思)
<link>元素中引入的样式表
<style>元素中以@import引入的样式表
<style>元素中的样式表,即写在html页面中的样式表
8.设置元素居中

给定宽元素设置margin:0 auto,出现设置无效的原因:

1.float会导致margin:0 auto无效

2.必须要有width

给不定宽元素设置水平居中:

1:将要居中的元素加入到table标签中的td标签里面

2:将块级元素设置成内联元素,display:inline 然后利用内联元素的text-aligin:center

3: 设置父元素position:relative ,display:inline-block,margin-left:50%,子元素margin-left:-50%
或者css3设置定位居中:
父元素:position:relative;子元素position:absolute;left:50%;top%;transform:translate(-50%,-50%);

*<script>的放置位置:*
script可以放置于任何位置,但是html是从上到下解析的,将<script>标签放到前面会导致找不到id等,一般将<script>
标签放到</body>的后面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值