html5input输入框设置无边框_CSS属性设置 -- 模型各部分详解

Ⅰ border边框

• 同时设置四条边的边框
  • border:边框的宽度 边框的样式 边框的颜色

.

同时设置

• 分别设置四条边的边框

border

• border-radius -- 盒子倒角

 单独设置一个角：数值越大，弧度越大
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
缩写设置
    border-radius: 20px;/* 所有角设置相同值 */
    border-radius: 20px 10px 10px 20px; /* 顺时针顺序：上左 上右 下左 下右*/
百分比设置
    border-radius: 50%;
椭圆圆弧设置
    border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 */
   
 <style>
        .box3 {border: 1px solid blue;
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;}
    <style>

<div class="box3">268工程</div>

Ⅱ padding内边距

• 边框与内容的距离就是内边距
• 非连写
  • padding-top：20px；
  • padding-right：20px；
  • padding-bottom：20px；
  • padding-left：20px；

<style>
        

• 连写
  • padding：上 右 下 左;
• 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
• padding是添加给父级的，改变的是父级包含的内容的位置
• 内边距也会有背景颜色

<style>
        

Ⅲ margin外边距

• display: inline-block -- 块级标签变成行内块级
• 标签与标签之间的距离就是外边距
• 非连写
  • margin-top：20px；
  • margin-right：20px；
  • margin-bottom：20px；
  • margin-left：20px；
• 连写
  • margin：上 右 下 左;
• 外边距的那一部分是没有背景颜色的
• 外边距合并现象
  • 在默认布局的水平方向上，默认两个盒子的外边距会叠加
  • 而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

.

Ⅳ 内边距vs外边距

• 在实际开发中,一般情况下需要控制嵌套关系盒子之间的距离
• 应该首先考虑padding
• 其次再考虑margin
• margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系
• 如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，那么外面一个盒子也会被顶下来
• 如果外面的盒子不想被遗弃顶下来，，那么可以给外面的盒子设置一个边框属性

Ⅴ 盒子居中与内容居中

• 让一行内容在盒子中水平且垂直居中
  • 水平居中
    • text-align: center;
    • 只能让盒子中存储的文字、图片水平居中
    • 如果想让盒子自己相对于父元素水平居中，需要用到
    • margin: 0 auto;
  • 垂直居中
    • line-height: 500px; -- 需要计算
    • 让多行内容在盒子中垂直居中（水平居中与单行内容一样）
  • 让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中
  • 比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
  • height: 80px;
  • line-height: 20px;
  • padding-top: 20px;
  • padding-bottom: 20px;
  • box-sizing: border-box;

div 

Ⅵ break-all防止文字溢出

• word-break: break-all; -- 自动换行,防止文字溢出
• 控制自动换行,且允许在单词内换行

<style>
        

Ⅶ 清除默认边距

• 浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
• 编写代码之前的第一件事情就是清空默认的边距
• * { margin: 0px; padding: 0px; }
• 通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好
• body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} -- 将常用标签全部写一遍

<style>